jQuery Sortable - 选择并拖动多个列表项

Question

我有一个设计，其中有一个“可用盒子”列表，用户通过将盒子从“可用盒子”列表拖动到他们的“我的盒子”列表来获取盒子。

用户经常一次拿走多个盒子（最多 20 个），一旦他们用完盒子，他们会将它们拖回“可用盒子”列表以返回它们。

jQuery sortable 允许我一次拖动一个框，从用户的角度来看这是不可取的。我一直无法想出一个简单的解决方案。

我可能不得不想出一个完全不同的 UI 方法，但首先有人对如何实现这一点有任何建议吗？

谢谢！

Answer 1

工作解决方案

tl;dr：Refer to this Fiddle for a working answer。

---

我到处寻找解决将多个选定项目从可排序项拖动到连接的可排序项问题的解决方案，这些答案是我能找到的最佳答案。

不过……

接受的答案有问题，@Shanimal's answer 很接近，但还不够完整。我采用了@Shaanimal 的代码并在其上进行构建。

我修好了：

• disappearing list item bug that @Ryan mentioned,
• 清理了 HTML 中的语法错误（缺少结束标记和嵌套的 <li/>s）。

我补充说：

• 适当的 Ctrl + 单击（或 Cmd + 单击，如果在 Mac 上）支持选择多个项目。点击而不按住Ctrl键将导致该项目被选中，而同一列表中的其他项目被取消选择。这与jQuery UI Selectable() widget 的点击行为相同，不同之处在于Selectable() 在鼠标拖动时有一个选取框。

Fiddle

HTML：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
<ul>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
</ul>

JavaScript（带有 jQ​​uery 和 jQuery UI）：

$("ul").on('click', 'li', function (e) {
    if (e.ctrlKey || e.metaKey) {
        $(this).toggleClass("selected");
    } else {
        $(this).addClass("selected").siblings().removeClass('selected');
    }
}).sortable({
    connectWith: "ul",
    delay: 150, //Needed to prevent accidental drag when trying to select
    revert: 0,
    helper: function (e, item) {
        var helper = $('<li/>');
        if (!item.hasClass('selected')) {
            item.addClass('selected').siblings().removeClass('selected');
        }
        var elements = item.parent().children('.selected').clone();
        item.data('multidrag', elements).siblings('.selected').remove();
        return helper.append(elements);
    },
    stop: function (e, info) {
        info.item.after(info.item.data('multidrag')).remove();
    }

});

注意：

自从我发布了这个，我实现了一些类似的东西 - 将可拖动的列表项连接到一个可排序的，具有多选功能。它的设置几乎完全相同，因为 jQuery UI 小部件非常相似。一个 UI 提示是确保您为可拖动项或可选择项设置了 delay 参数，这样您就可以单击以选择多个项目而无需启动拖动。然后构建一个 看起来 像所有选定元素放在一起的帮助器（创建一个新元素，克隆选定的项目，然后附加它们），但 确保 离开原始项目完好无损（否则它会破坏功能 - 我无法确切说明原因，但它涉及许多令人沮丧的 DOM 异常）。

我还添加了 Shift + Click 功能，使其功能更像原生桌面应用程序。我可能需要创建一个博客，以便更详细地阐述这一点:-)

Answer 2

我没有使用 sortable 进行这项工作，但我确实使用了 draggable 和 droppable。我不知道我是否涵盖了您需要的所有功能，但这应该是一个好的开始 (demo here)：

HTML

<div class="demo">
    <p>Available Boxes (click to select multiple boxes)</p>    
    <ul id="draggable">
        <li>Box #1</li>
        <li>Box #2</li>
        <li>Box #3</li>
        <li>Box #4</li>
    </ul>

    <p>My Boxes</p>
    <ul id="droppable">
    </ul>

</div>

脚本

$(document).ready(function(){

    var selectedClass = 'ui-state-highlight',
        clickDelay = 600,     // click time (milliseconds)
        lastClick, diffClick; // timestamps

    $("#draggable li")
        // Script to deferentiate a click from a mousedown for drag event
        .bind('mousedown mouseup', function(e){
            if (e.type=="mousedown") {
                lastClick = e.timeStamp; // get mousedown time
            } else {
                diffClick = e.timeStamp - lastClick;
                if ( diffClick < clickDelay ) {
                    // add selected class to group draggable objects
                    $(this).toggleClass(selectedClass);
                }
            }
        })
        .draggable({
            revertDuration: 10, // grouped items animate separately, so leave this number low
            containment: '.demo',
            start: function(e, ui) {
                ui.helper.addClass(selectedClass);
            },
            stop: function(e, ui) {
                // reset group positions
                $('.' + selectedClass).css({ top:0, left:0 });
            },
            drag: function(e, ui) {
                // set selected group position to main dragged object
                // this works because the position is relative to the starting position
                $('.' + selectedClass).css({
                    top : ui.position.top,
                    left: ui.position.left
                });
            }
        });

    $("#droppable, #draggable")
        .sortable()
        .droppable({
            drop: function(e, ui) {
                $('.' + selectedClass)
                 .appendTo($(this))
                 .add(ui.draggable) // ui.draggable is appended by the script, so add it after
                 .removeClass(selectedClass)
                 .css({ top:0, left:0 });
            }
        });

});

Answer 3

JSFiddle：http://jsfiddle.net/hQnWG/

<style>
    ul {border:1px solid Black;width:200px;height:200px;display:inline-block;vertical-align:top}
    li {background-color:Azure;border-bottom:1px dotted Gray}   
    li.selected {background-color:GoldenRod}
</style>
<h1>Click items to select them</h1>
<ul>
    <li>One</li>
    <li>Two<li>
    <li>Three</li>
</ul><ul>
    <li>Four</li>
    <li>Five<li>
    <li>Six</li>
</ul>
<script>
    $("li").click(function(){
        $(this).toggleClass("selected");
    })
    $("ul").sortable({
        connectWith: "ul",
        start:function(e,info){
            // info.item.siblings(".selected").appendTo(info.item);
            info.item.siblings(".selected").not(".ui-sortable-placeholder").appendTo(info.item);

        },
        stop:function(e,info){
            info.item.after(info.item.find("li"))
        }
    })
</script>

Answer 4

为此有一个 jQuery UI 插件：https://github.com/shvetsgroup/jquery.multisortable

jsFiddle：http://jsfiddle.net/neochief/KWeMM/

$('ul.sortable').multisortable();

Answer 5

Aaron Blenkush 的解决方案有一个重大缺陷：在可排序列表中删除和添加项目会破坏结构； refresh 可以提供帮助，但如果其他函数处理列表，则需要触发所有这些函数来刷新，这一切都变得过于复杂。

在stackoverflow分析了一些解决方案后，我总结了以下几点：

不要使用helper - 使用start函数，因为它已经有ui.item，默认是helper。

    start: function(event, ui){
        // only essential functionality below

        // get your own dragged items, which do not include ui.item;
        // the example shows my custom select which selects the elements
        // with ".selected" class
        var dragged = ui.item.siblings(arr["nested_item"]).children('.tRow.tSelected').parent(arr["nested_item"]);

        // clone the dragged items
        var dragged_cloned = dragged.clone();

        // add special class for easier pick-up at update part
        dragged_cloned.each(function(){$(this).addClass('drag_clone');});

        // record dragged items as data to the ui.item
        ui.item.data('dragged', dragged);

        // hide dragged from the main list
        dragged.hide();

        // attached cloned items to the ui.item - which is also ui.helper
        dragged_cloned.appendTo(ui.item);
        },

1. 关于更新部分：

   update: function(event, ui){
       // only essential functionality below
   
       // attach dragged items after the ui.item and show them
       ui.item.after(ui.item.data("dragged").show());
   
       // remove cloned items
       ui.item.children(".drag_clone").remove();
       },
   

停止功能可能需要更新功能的一些副本，但可能与更新分开，因为如果没有更改 - 请勿向服务器提交任何内容。

添加：保留拖动项目的顺序。