我有两个列表#sortable1
和#sortable 2
,它们是连接的可排序列表,如本例所示。
您可以将列表项从sortable1
拖放到sortable 2
。但是,如果sortable 1中的项目包含类“number”,我想防止在Sortable2上的拖放,从而使拖动的项目拖回sortable 1。
我在sortable2上使用了以下代码:
receive: function (event, ui) {
if ($(ui.item).hasClass("number")) {
$(ui.item).remove();
}
但是它从两个表中一起删除该列表项。任何帮助将不胜感激。
8条答案
按热度按时间k4ymrczo1#
对于将来阅读这篇文章的任何人来说,正如briansol在接受答案的评论中提到的那样,它会抛出错误
文件特别指出,
cancel()
取消当前排序表中的更改,并将其恢复到当前排序开始之前的状态。在stop和receive回调函数中很有用。
在其他事件期间取消排序是不可靠的,因此最好使用
receive
事件,如Mj Azani的answer所示,或者使用stop
事件,如下所示:Demo
ua4mk5z42#
可以组合使用
stop
和sortable('cancel')
方法来验证要移动的项。在this example中,当一个项目被删除时,我通过以下方式检查该项目是否有效:1.检查项目是否具有类
number
1.* 和 * 检查
list2
中的列表项是否被删除这是我想要的稍微硬编码,所以你可以做的是根据
this
检查被删除项的父项,检查列表是否不同。这意味着您可能在list1
和list2
中拥有一个number
项,但它们不可互换。jsFiddle Example
shyt4zoc3#
尝试this example
gkn4icbw4#
经过几次实验,我发现到目前为止最简单的方法是使用remove事件,它基本上只在您尝试将一个项目放入新的sortable(以前使用connectWith作为目标)时才会触发。
只需将此添加到您的可排序调用:
hk8txs485#
如果你根本不需要能够拖动类为“number”的项目,你也可以将整个拖放功能限制在不具有类“number”的项目上:
你可以在这里试试:http://jsfiddle.net/60gwjsgb/1/
ejk8hzay6#
试试这个.
ca1c2owp7#
如果a)你只有这两个列表,并且B)你不在乎你的“数字”实际上被拖动然后又被拖回,你可以简单地通过以下方式防止它被拖动:
6bc51xsx8#
这是我的两分钱。如果你不希望在一个连接列表中允许排序,你可以在触发start even时将它从示例对象的容器中删除,这样排序就不会发生,如果你需要在之后恢复排序功能,你可以再次重新创建sortable或将删除的元素添加回容器数组。它看起来像这样: