jquery - JQueryui - Manage connected sortable lists forcing only one element by list -

i'm using jqueryui connected sortable lists , drop elements when connected list empty, have force user add maximum 1 element. using jquery droppable not allowed.

so, how can manage jqueryui connected list restrict number of elements inside? want sortable1 , sortable2 accept 1 element 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" }); }); 

thanks in advance.

you use solution this

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

this enables move 1 element #sortable0 #sortable1 or/and #sortable2. can move them #sortable0. or move e.g. #sortable1 #sortable2 if #sortable2 still empty

check test case

---

the selector wrote in connectwith evaluated everytime drag element around. if sortable1/2 contain element aren't marked connectwith , aren't available target. if need more fine tuned control e.g. sortable0 accepting number of elements, sortable1 0 or 1 , sortable2 0 or 1 or 2 elements can use

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

edit: striked out code doesn't work need it