jquery - 防止在 JqueryUI 可排序中删除列表项

Question

我有两个列表#sortable1和#sortable 2，它们是连接的可排序项，如example所示.

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

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

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

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

Answer 1

对于将来阅读本文的任何人，如 briansol 所提到的在已接受答案的评论中，它会抛出错误

Uncaught TypeError: Cannot read property 'removeChild' of null

文档特别说明

cancel()

Cancels a change in the current sortable and reverts it to the state prior to when the current sort was started. Useful in the stop and receive callback functions.

在其他事件期间取消排序是不可靠的，所以最好使用receive事件如Mj Azani所示的answer或使用stop事件如下:

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

$('#list2').sortable({
   connectWith: 'ul',
});  

Demo