jQuery UI Sortable - 防止丢弃一个特定的列表

Ric*_*nks 5 jquery jquery-ui jquery-ui-sortable

我有3名无序列表(比如#list1,#list2#list3),目前,用户可以自由移动任何<li>这三个之间.如何防止任何物品掉入#list3

用户应该能够之间自由移动项目#list1#list2,以及能够将项目 #list3到任何其他列表,而不是一个项目拖放到#list3(无论哪个列出其来源).

kei*_*ant 7

如果从stopor beforeStop方法返回false ,它将取消排序.

.ui-sortable-placeholder元素将仍然到位时beforeStop被调用,这样就可能是检查的位置是最容易的地方#list3或不:

myElement.sortable({
    beforeStop: function (event, ui) {
        if ($("#list3").find('.ui-sortable-placeholder').length) {
            // about to drop item into #list3, so cancel the sort
            return false;
        }
    }
});
Run Code Online (Sandbox Code Playgroud)

交替:

我不确定你是如何在多个列表上实例化一个可排序的(因为我之前没有使用过该connectWith选项),但是如果你在每个列表上单独调用它,你可能甚至不需要find()检查:

$("#list1").sortable({
    connectWith: '#list2, #list3'
});
$("#list2").sortable({
    connectWith: '#list1, #list3'
});
$("#list3").sortable({
    connectWith: '#list1, #list3',
    stop: function() { return false; }
});
Run Code Online (Sandbox Code Playgroud)

不确定第二种方法是否有效,但如果您的代码结构类似,则可能值得一试.