jQuery UI Sort - 两个列表并防止在原始列表中排序答案

【问题标题】：jQuery UI Sort - two list and prevent sortable inside origin listjQuery UI Sort - 两个列表并防止在原始列表中排序
【发布时间】：2013-01-21 15:28:01
【问题描述】：

我有一个简单的 jquery ui 示例。基本上我必须列出项目，每个项目都是可排序的。我想要完成的是以下内容：取消对同一列表的排序。举个例子，如果我单击列表一中位置一的元素，然后将其拖动到位置 6，然后放下。我想防止这种情况发生，但是如果我将元素放在列表二中，那没关系。

我不知道如何指定，以适应我的要求。 ConnectWith 似乎还不够：

$("#sortable").sortable({
    connectWith: [$('#sortable2')]
});

$("#sortable2").sortable({
    connectWith: [$('#sortable')]
});

示例如下：

http://jsfiddle.net/sQeZE/3/

【问题讨论】：

你的意思是你只希望能够从列表 1 中获取并提供给列表 2？
是的，但如果我将元素放在与原点相同的列表中，请阻止排序。我会解释自己吗？

标签： jquery jquery-ui

【解决方案1】：

这可能不是完全您正在寻找的，但您可以绑定到receive 和stop 事件（它们按此顺序触发）。 receive 表示从另一个列表接收到一个列表项。触发此操作时，您可以暂时取消阻止排序。 stop 总是试图阻止排序：

var blocksort = true;
//Using jQuery 1.6.4, but use `.on` when available
$("#sortable, #sortable2").bind('sortreceive', function () {
    blockSort = false;
}).bind('sortstop', function (e) {
    if (blockSort) {
        e.preventDefault();
    }
    blockSort = true;
});

http://jsfiddle.net/sQeZE/5/

【讨论】：

虽然我的要求有点不同。这是帮助我找到正确方向的唯一答案......非常感谢:-)

【解决方案2】：

一种选择是将列表的包含限制为另一个列表，如下所示：

$("#sortable").sortable({
    connectWith: [$('#sortable2')],
    containment: $('#sortable2') });

$("#sortable2").sortable({
    connectWith: [$('#sortable')],
    containment: $('#sortable') });

这使得#sortable 的项目只能在#sortable2 的列表中排序，反之亦然

【讨论】：

理论上不错，但是containment 也限制了可排序项目的移动，所以效果对用户来说非常不和谐。
这是一个很好的观点，但我的 iu 的行为方式很奇怪。非常感谢您的时间和代码。