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

Question

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

用户通常会一次拿走多个盒子(最多 20 个)，一旦他们用完盒子，他们就会将它们拖回“可用盒子”列表以归还它们。

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

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

谢谢!

Answer 1

工作解决方案

tl;博士:Refer to this Fiddle for a working answer .

<小时/>

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

但是...

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

我修复了:

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

我添加:

• 正确的Ctrl + 单击(或Cmd + 单击，如果在Mac 上)支持选择多个项目。在不按住 Ctrl 键的情况下单击将导致选中该项目，并取消选择同一列表中的其他项目。这与 jQuery UI Selectable() widget 的点击行为相同。 ，区别在于 Selectable() mousedrag 上有一个选取框。

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(使用 jQuery 和 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 功能，使其功能更像 native 桌面应用程序。我可能需要创建一个博客，以便我可以更详细地阐述这一点:-)