Jquery 可排序和克隆

Question

场景:拖动一个或多个元素并将其放入另一个列表中，但不从源列表中删除拖动的元素。

为了允许多次拖动，我使用了 Aaron Blenkush here 发布的代码.

Demo

我已进行更改以满足我的需求，例如修复 Shift 问题。

  $("ul").on('click', 'li', function (e) {
      if (e.ctrlKey || e.metaKey) { //meta key for mac users
          $(this).toggleClass("ui-selected");
          $(this).parent().parent().siblings().children('ul').children().removeClass('ui-selected');
    }
    else if (e.shiftKey) {
        // $(this).toggleClass("selected");               
        var list = $(this).parent();
        var first = list.find('.ui-selected').first().index();
        // var last = list.find('.selected').last().index();
        var last = $(this).index();

        if (first == -1 || last == -1) {
            return false;
        }

        if (last < first) {
            firstHolder = first;
            first = last;
            last = firstHolder;
        }

        for (i = first; i <= last ; i++) {
            list.children().eq(i).addClass("ui-selected");
        }
    }
    else {                
        $(this).addClass("ui-selected").siblings().removeClass('ui-selected'); //select only clicked element and unselecting other elements

        //to Remove selected Class from 2nd UL li
        $(this).parent().parent().siblings().children('ul').children().removeClass('ui-selected');
    }
})
   .sortable({
       connectWith: "ul",
       delay: 150, //Needed to prevent accidental drag when trying to select
       revert: 0,
       cursor: "move",
       disabled: false,
       placeholder: 'placeholder',
       //  handle: ".handle",
       helper: function (e, item) {
           //Basically, if you grab an unhighlighted item to drag, it will deselect (unhighlight) everything else
           if (!item.hasClass('ui-selected')) {
               item.addClass('ui-selected').siblings().removeClass('ui-selected');
           }

           //////////////////////////////////////////////////////////////////////
           //HERE'S HOW TO PASS THE SELECTED ITEMS TO THE `stop()` FUNCTION:

           //Clone the selected items into an array
           var elements = item.parent().children('.ui-selected').clone();

           //Add a property to `item` called 'multidrag` that contains the selected items, then remove the selected items from the source list
           item.data('multidrag', elements)
               //.siblings('.ui-selected').remove();

           //Now the selected items exist in memory, attached to the `item`, so we can access them later when we get to the `stop()` callback

           //Create the helper
           var helper = $('<li/>');
           return helper.append(elements);
       },
       start: function(event, ui) {
           //$(ui.item).show();
           var elements = ui.item.data('multidrag');
           ui.item.after(elements);
           //clone = $(ui.item).clone();
           //before = $(ui.item).prev();
       },
       stop: function (e, ui) {
           //Now we access those items that we stored in `item`s data!
           var elements = ui.item.data('multidrag');

           //`elements` now contains the originally selected items from the source list (the dragged items)!!

           //Finally I insert the selected items after the `item`, then remove the `item`, since item is a duplicate of one of the selected items.
           ui.item.after(elements).remove();
         //  $(ui.item).show();
           //$(this).sortable('cancel');
       }
   });

问题:它从源列表中删除删除的元素。

我对这个问题进行了一些研究。有人说在辅助方法中使用克隆，但是当我传递给返回多个元素的函数时，我无法使用克隆。在 Firebug 中，当我拖动元素时，它会将 style=display:none 放在元素上，但当我放下元素时，它会将它们从源列表中删除。

更新

我对接受的答案做了一些更改，以使其更简单

Updated Answer

存在一些问题，例如李从第一列表下降到第二列表。然后将该 li 从第二个拖回到第一个，它将删除元素

解决方案 cld是当项目被放入第二个列表时删除ui-selected类。

我希望这会对某人有所帮助:)

Answer 1

好吧，我弄乱了它一段时间..以下是我当时能想到的最好的..

var selected;
var selectedCurrent;
var temp;
var received = false;
$("ul").on('mousedown', 'li', function (e) {
if($(this).next('li').hasClass('pholder'))
        $(this).next('li').remove();
if ((e.ctrlKey || e.metaKey) && selected != undefined) {
    if($(this).text() != selectedCurrent.text()) 
         selectedCurrent.after(selected.clone().addClass('pholder temp').hide());
}
selectedCurrent = $(this);
selected = $(this).clone().removeClass('selected');
});
$("ul").on('click', 'li', function (e) {
if(temp != undefined)
    $('.temp').remove();        
if (e.ctrlKey || e.metaKey) {
    if($(this).next('li').hasClass('pholder'))
        $(this).next('li').remove();
    else
        $(this).after($(this).clone().addClass('pholder').hide());
    $(this).toggleClass("selected");
} else {
    $(this).addClass("selected").siblings().removeClass('selected');
    $('.pholder').remove();
}
}).sortable({
connectWith: "ul",
delay: 150,
revert: 0,
helper: function (e, item) {
    if (!item.hasClass('selected')) {
        item.addClass('selected').siblings().removeClass('selected');
    }
    var elements = item.parent().children('.selected').clone();
    item.data('multidrag', elements).siblings('.selected').remove();
    var helper = $('<li/>');
    return helper.append(elements);
},
stop: function (e, ui) {
    if(!received){
        selected.remove();
        $('.pholder').remove(); 
    }
    else{
        received = false;
        $('.pholder').removeClass('pholder');
    }
    var elements = ui.item.data('multidrag');
    ui.item.after(elements).remove();
    $('.selected').removeClass('selected');
},
start: function(event, ui){
    ui.item.after(selected);
    $('.pholder').show();
},
receive: function(event, ui){
        received = true;
}
});

fiddle

http://jsfiddle.net/hQnWG/749/

更新

http://jsfiddle.net/hQnWG/752/

更新 2 - 删除列表中的重复项。

http://jsfiddle.net/hQnWG/754/