I have 3 unordered lists (say, #list1
, #list2
and #list3
) and currently, users can freely move any <li>
between those three. How would I prevent any item from being dropped in #list3
?
Users should be able to move items freely between #list1
and #list2
, as well as being able to move items from #list3
into any other list, but not to drop an item into #list3
(regardless of which list it originates from).
If you return false from the stop
or beforeStop
method, it will cancel the sort.
The .ui-sortable-placeholder
element will still be in place when beforeStop
is called, so that may be the easiest place to check if the location is in #list3
or not:
myElement.sortable({
beforeStop: function (event, ui) {
if ($("#list3").find('.ui-sortable-placeholder').length) {
// about to drop item into #list3, so cancel the sort
return false;
}
}
});
alternately:
I'm not exactly sure how you're instantiating a sortable on multiple lists (as I haven't worked with the connectWith
option before), but if you're call it on each list independently, you might not even need the find()
check:
$("#list1").sortable({
connectWith: '#list2, #list3'
});
$("#list2").sortable({
connectWith: '#list1, #list3'
});
$("#list3").sortable({
connectWith: '#list1, #list3',
stop: function() { return false; }
});
Not sure if this second method works or not, but it might be worth a shot if your code is already structured similarly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With