jQuery UI Sortable - prevent dropping on one particular list

Question

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).

Answer 1

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.