Question

我有以下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>

谢谢。

Answer 1

首先，在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"});
        }
    }});
});

New Fiddle

Answer 2

这是我提出的一个小提琴，可以在多个列表之间移动项目，但如果按住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/

如果按下CTRL键，JQuery会拖动并移动原始文件但保留原始文件？

2 个答案: