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 为真，则克隆您的项目。

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

这是小提琴

在小提琴中，您需要在 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 回答