CODEWITHSUNDEEP
jquery-uijquery-ui-sortablejquery-ui-droppable
DanH
DanH

Reputation: 5818

jQuery UI Sortable + Droppable both trigger when dropped on droppable

I have a list of elements that are sortable and sort fine. I also have a droppable that resides outside of the sortable list. When I drop items on the droppable, it is intended to perform a copy operation, meaning that sorting during this operation is not desirable.

Unfortunately however, dragging a sortable to an external droppable causes sortable.update to fire. Is there a way to have all sortable drag/drop events ignored if a sortable is dragged outside of a given element?

I've gone through all the relevant sortable events, and I can't seem to find any reference to the element the sortable was dropped on, in order to see if they have common parents.

Here's a fiddle to demonstrate: http://jsfiddle.net/6yhbG/

Dragging either sortable 1/2 to the droppable causes the sortable.sort to fire.

Upvotes: 1

Views: 2628

Answers (1)

DanH
DanH

Reputation: 5818

OK finally got to the bottom of it: sortable('cancel') needs to be called from sortable.stop and I'm simply adding a class to the sortable so it knows whether to cancel itself or not:

$('div').droppable({
    drop: function(e, ui) {
        ui.draggable.parent().addClass('dropped');
    }
});

$('ul').sortable({
    stop: function(){
        if ($(this).hasClass('dropped')){
            $(this).sortable('cancel');
            $(this).removeClass('dropped');
        }           
    }
});

With my updated example at: http://jsfiddle.net/6yhbG/1/

Upvotes: 4

Related Questions