JQueryui - 管理连接的可排序列表，仅按列表强制一个元素

Question

我正在使用Jqueryui连接的可排序列表，我只想在连接列表为空时删除元素，所以我必须强制用户添加最多1个元素。 不允许使用Jquery droppable。

那么，我如何管理JQueryui连接列表来限制里面的元素数量？ 我希望sortable1和sortable2只接受sortable0中的一个元素。

<ul id="sortable0" class="connectedSortable"> 
  <li> word1 </li> <li> word2 </li> <li> wordN </li>
 </ul>

<ul id="sortable1" class="connectedSortable"> </ul>
<ul id="sortable2" class="connectedSortable"> </ul>

$(function() {
  $( "#sortable0, #sortable1, #sortable2" ).sortable({ connectWith: ".connectedSortable" });
});

提前致谢。

Answer 1

你也可以使用像这样的解决方案

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

这使您可以将一个元素从#sortable0移动到#sortable1或/和#sortable2。您也可以将它们移回#sortable0。或从例如如果#sortable1仍为空，则#sortable2至#sortable2

选中此test case

---

每次拖动元素时，都会评估我在connectWith中编写的选择器。因此，如果sortable1/2已经包含一个元素，则它们不会被标记为connectWith并且不可用作目标。 <击> 如果您需要更精细的调整控件，例如sortable0接受任意数量的元素，sortable1正好为0或1，sortable2 0或1或2个元素可以使用

$("#sortable0, #sortable1, #sortable2").sortable({
    connectWith: "#sortable0, #sortable1:not(:has(li)), #sortable2:not(:has(li:eq(1)))"
});

编辑：罢工代码不起作用需要查看

Answer 2

由于没有默认选项，因此您必须使用beforeStop或receive等事件。

$( "#sortable0, #sortable1, #sortable2" ).sortable(
   { connectWith: ".connectedSortable",
     beforeStop: function(event,ui){
       // Do the check
     }
   }
);

例如。