CODEWITHSUNDEEP
jquerylistjquery-uijquery-ui-sortable
rusben
rusben

Reputation: 646

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

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.

Upvotes: 0

Views: 2332

Answers (2)

jitter
jitter

Reputation: 54625

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

Upvotes: 2

Shikiryu
Shikiryu

Reputation: 10219

As there's no default option for this, you must use an event like beforeStop or receive.

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

for example.

Upvotes: 0

Related Questions