jQuery可排序-拖放多个项目

我有以下代码，它允许用户从一个列表拖放到另一个列表。现在，我如何允许用户选择和拖放多个项目

像这样的？

我曾尝试将JSFIDLE中的代码合并到中，但实际上无法使其正常工作。非常感谢您的帮助

请帮帮我。多谢各位

HTML

剧本

    $(function() {
        $("ul.droptrue").sortable({
            connectWith: 'ul',
            opacity: 0.6,
            update : updatePostOrder
        });

        $("#sortable1, #sortable2").disableSelection();
        $("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");
        updatePostOrder();
    });

    function updatePostOrder() { 
        var arr = [];
      $("#sortable2 li").each(function(){
        arr.push($(this).attr('id'));
      });
      $('#postOrder').val(arr.join(','));
  }

---

一种方法是使用选定项创建自定义项，在拖动时隐藏这些项，并在拖动时手动附加选定项

以下是我的尝试：

css

脚本：

 $('.droptrue').on('click', 'li', function () {
    $(this).toggleClass('selected');
 });

 $("ul.droptrue").sortable({
    connectWith: 'ul.droptrue',
    opacity: 0.6,
    revert: true,
    helper: function (e, item) { //create custom helper
        if(!item.hasClass('selected'))
           item.addClass('selected');
        // clone selected items before hiding
        var elements = $('.selected').not('.ui-sortable-placeholder').clone();
        //hide selected items
        item.siblings('.selected').addClass('hidden');
        var helper = $('<ul/>');
        return helper.append(elements);
    },
    start: function (e, ui) {
        var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
        //store the selected items to item being dragged
        ui.item.data('items', elements);
    },
    receive: function (e, ui) {
        //manually add the selected items before the one actually being dragged
        ui.item.before(ui.item.data('items'));
    },
    stop: function (e, ui) {
        //show the selected items after the operation
        ui.item.siblings('.selected').removeClass('hidden');
        //unselect since the operation is complete
        $('.selected').removeClass('selected');
    },
    update: updatePostOrder
});

可获得的 第一条 第二条 第三条 我的文章 哪些物品，按什么顺序

---

你会想看看把手。。这是您应该在示例中关注的代码：start:function，ui{ui.helper.addClassselectedClass；}，搜索helper/handle jquery sortableGreat info！这对回答这个问题很有帮助：

    $(function() {
        $("ul.droptrue").sortable({
            connectWith: 'ul',
            opacity: 0.6,
            update : updatePostOrder
        });

        $("#sortable1, #sortable2").disableSelection();
        $("#sortable1, #sortable2").css('minHeight',$("#sortable1").height()+"px");
        updatePostOrder();
    });

    function updatePostOrder() { 
        var arr = [];
      $("#sortable2 li").each(function(){
        arr.push($(this).attr('id'));
      });
      $('#postOrder').val(arr.join(','));
  }

.selected {
  background:red !important;
}
.hidden {
  display:none;
}

 $('.droptrue').on('click', 'li', function () {
    $(this).toggleClass('selected');
 });

 $("ul.droptrue").sortable({
    connectWith: 'ul.droptrue',
    opacity: 0.6,
    revert: true,
    helper: function (e, item) { //create custom helper
        if(!item.hasClass('selected'))
           item.addClass('selected');
        // clone selected items before hiding
        var elements = $('.selected').not('.ui-sortable-placeholder').clone();
        //hide selected items
        item.siblings('.selected').addClass('hidden');
        var helper = $('<ul/>');
        return helper.append(elements);
    },
    start: function (e, ui) {
        var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
        //store the selected items to item being dragged
        ui.item.data('items', elements);
    },
    receive: function (e, ui) {
        //manually add the selected items before the one actually being dragged
        ui.item.before(ui.item.data('items'));
    },
    stop: function (e, ui) {
        //show the selected items after the operation
        ui.item.siblings('.selected').removeClass('hidden');
        //unselect since the operation is complete
        $('.selected').removeClass('selected');
    },
    update: updatePostOrder
});