防止JqueryUI中的列表项丢弃可排序

我有两个列表#sortable1和#sortable 2 ，它们是连接的sortables，如本例所示。

您可以将列表项从sortable1拖放到sortable 2 。 但是，如果sortable 1中的项目包含类“number”，我想阻止 Sortable2的删除，从而使拖动的项目回退到可排序的1 。

我在sortable2上使用了以下内容：

 receive: function (event, ui) { if ($(ui.item).hasClass("number")) { $(ui.item).remove(); } 

但它会从两个表中删除列表项。 任何帮助将不胜感激。

Answer 1

您可以结合使用beforeStop和sortable('cancel')方法来validation要移动的项目。 在此示例中 ，在删除项目时，我通过以下方式检查项目是否有效：

1. 检查项目是否具有class级number
2. 并检查list2是否删除了列表项

这是我想要的稍微硬编码，所以或者你可以做的是检查被删除项目的父项，以检查列表是否不同。 这意味着您可能在list1和list2有一个number项，但它们不可互换。

jsFiddle示例

 $(function() { $('ul').sortable({ connectWith: 'ul', beforeStop: function(ev, ui) { if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) { $(this).sortable('cancel'); } } }); });​ 

Answer 2

对于将来阅读此内容的人，正如briansol在对已接受答案的评论中所提到的，它会引发错误

 Uncaught TypeError: Cannot read property 'removeChild' of null 

文档特别说

cancel()

取消当前可排序的更改并将其还原到当前排序开始之前的状态。 在停止和接收回调函数中很有用。

在其他事件期间取消排序是不可靠的，因此最好使用Mj Azani的答案中显示的receive事件或使用如下的stop事件：

 $('#list1').sortable({ connectWith: 'ul', stop: function(ev, ui) { if(ui.item.hasClass("number")) $(this).sortable("cancel"); } }); $('#list2').sortable({ connectWith: 'ul', }); 

演示

Answer 3

试试这个例子

 $（ '＃列表1'）。排序（{
     connectWith：'ul'
 }）;    

 $（ '＃列表2'）。排序（{
     connectWith：'ul'，
    接收：function（ev，ui）{
        如果（ui.item.hasClass（ “数字”））
           ui.sender.sortable（ “取消”）;
     }
 }）;    

Answer 4

经过几次实验，我发现到目前为止最简单的方法是使用remove事件，当你试图将一个项目放入一个新的sortable（之前使用connectWith作为目标可用）时，它基本上只会触发。

只需将此添加到您的可排序电话：

 remove:function(e,ui) { if(ui.item.hasClass('your_restricted_classname')) return false; }, 

Answer 5

如果您不需要能够拖动具有“数字”类的项目，您还可以将整个拖放function限制为没有“数字”类的项目：

 $("#sortable1, #sortable2").sortable({ connectWith: ".connectedSortable", items: "li:not(.number)" }); 

你可以在这里试试： http ： //jsfiddle.net/60gwjsgb/1/

Answer 6

 beforeStop: function(ev, ui) { if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) { $(this).sortable('cancel'); } } 

试试这个。

Answer 7

如果a）你只有这两个列表，并且b）你不关心你的“数字”实际被拖动然后退回，你可以简单地防止它被这样拖动：

  sort: function(event, ui) { if(ui.item.hasClass('number')) return false; }