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 
    } 
    } 
); 

例如。