Question

I’m using Jqueryui connected sortable lists and I would like to drop elements only when the connected list is empty, so I have to force the user to add maximum 1 element.
Using Jquery droppable is not allowed.

So, How can I manage JQueryui connected list to restrict the number of elements inside?
I want sortable1 and sortable2 to accept only one element from 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.

Answer 1

You could also use a solution like this

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

This enables you to move exactly one element from #sortable0 to #sortable1 or/and #sortable2. You can also move them back to #sortable0. or move it from e.g. #sortable1 to #sortable2 if #sortable2 is still empty

Check this test case

---

The selector I wrote in connectWith is evaluated everytime you drag an element around. thus if sortable1/2 already contain an element they aren’t marked as connectWith and aren’t available as target.

If you need a more fine tuned control e.g. sortable0 accepting any number of elements, sortable1 exactly 0 or 1 and sortable2 0 or 1 or 2 elements you can use

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

Edit: the striked out code doesn’t work need to look into it