user1038814 user1038814 - 4 months ago 41
jQuery Question

Prevent drop of list item in JqueryUI sortable

I have two lists

#sortable1
and
#sortable 2
which are connected sortables, as shown in this example.

You can drag and drop list items from
sortable1
to
sortable 2
. However, if an item in sortable 1 contains the class "number", I want to prevent the drop on Sortable2 and thus make the dragged item drop back into sortable 1.

I have used the following on sortable2:

receive: function (event, ui) {
if ($(ui.item).hasClass("number")) {
$(ui.item).remove();
}


but it deletes the list item from both tables altogether. Any help will be appreciated.

Answer

You can use a combination of the beforeStop and sortable('cancel') methods to validate the item being moved. In this example, upon an item being dropped, I check if the item is valid by:

  1. Checking if the item has the class number
  2. and checking if the list item was dropped in list2

This is slightly more hard-coded that I'd like, so alternatively what you could do is check the parent of the dropped item against this, to check if the lists are different. This means that you could potentially have an item of number in list1 and list2, but they're not interchangeable.

jsFiddle Example

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        beforeStop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});‚Äč