1

次の JQuery コードをドラッグ アンド ドロップして、ul アイテムの順序 (#list ul) を変更します。CTRLキーが押された場合、ドラッグ＆移動してオリジナルを残すにはどうすればよいですか？

<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#res").slideUp("slow", function () {
      });

}, 2000);}

    $("#res").hide();
    $(function() {
    $("#list ul").sortable({ opacity: 0.4, cursor: 'move', update: function() {

            var order = $(this).sortable("serialize") + '&update=update';
            $("#hload").fadeIn('fast');
            $.post("upd.php", order, function(theResponse){
                $("#res").html(theResponse);
                $("#res").slideDown('slow');
                $("#hload").fadeOut('fast');
                slideout();

            });
        }
        });
    });

});
</script>

ありがとうございました。

4

2 に答える 2

2

まず、Ctrl キーが押されているときに変数を設定します。

var ctrlDown = false;
$(window).on("keydown", function(event) {
    if (event.which === 17) {
        ctrlDown = true;
    }
}).on("keyup", function(event) {
    ctrlDown = false;
});

次に、ctrlDown が true の場合、アイテムを複製します。

$(".sortable").sortable({start: function( event, ui ) {
    if (ctrlDown) {
        $clone = ui.item.clone().insertBefore(ui.item);
        $clone.css({position:"static"});
    }
}});

ここにフィドルがあります

Fiddle では、keydown および keyup イベントが機能する前に、ウィンドウをクリックする必要があります。

編集:後世のためにオリジナルを残しますが、これはイベント オブジェクトの ctrlKey プロパティを使用するだけで最初に作成されたものよりもはるかに簡単でした。

$(document).ready(function() {
    $(".sortable").sortable({start: function( event, ui ) {
        if (event.ctrlKey){
            $clone = ui.item.clone().insertBefore(ui.item);
            $clone.css({position:"static"});
        }
    }});
});

新しいフィドル

于 2013-03-31T03:35:29.170 に答える
0

これは私が思いついたフィドルで、複数のリスト間でアイテムを移動しますが、Ctrl が押された場合は元のままです。

      $(".connectedSortable" ).sortable({
        connectWith: ".connectedSortable",
        placeholder: "ui-state-highlight",
        helper: function(e,li) {
              copyHelper= li.clone().insertAfter(li);
              return li.clone();
         },
        stop: function() {
              copyHelper && copyHelper.remove();
        },
        receive: function(event, ui) {
            if (event.ctrlKey){
                copyHelper= null;
            }
            var myOrder = {};
            $(".sortable ul").each(function() {
                var key = $(this).attr("data-name");
                myOrder[key] = [];
                $(this).find('li').each(function(){
                    myOrder[key].push($(this).attr("data-key"));
                });
            });
            var arr = JSON.stringify(myOrder);
            $('#field_mappings').val(arr);
        }
    });

http://jsfiddle.net/n92e5e2r/10/

于 2015-02-18T11:43:07.190 に答える