jQuery UI drop event of droppable fires on sortable

Question

I have a list of elements that can be dropped into a list of (existing) sortables. When a droppable element is dropped into the sortables, I want to modify the element. I do this by calling the drop event of droppable.

But it seems this drop event is also fired when the sortable elements are sorted inside sortable. And I only want to modify the dropped element when dropped-in from the outside.

$('#sortable').sortable().droppable({
// Drop should only fire when a draggable element is dropped into the sortables,
// and NOT when the sortables themselves are sorted (without something being dragged into).
drop: function(ev, ui){
    $(ui.draggable).html('<div>TEMPLATE</div>');
}
});
$('#draggables li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid',
    cursor: 'move'
});

Complete example on Fiddle.

How can I modify a dropped-in element without modifying them when sorted inside of sortable?

The reason this is happening appears to be that sortable items have the properties of draggable items by default - at least according to the documentation. http://jqueryui.com/demos/sortable/ — gailbear, Feb 28 '12 at 22:30

score 2 · Answer 1 · answered Nov 12 '14 at 16:41

You could use the sortreceive event of the sortable. This event is fired when a new element is inserted into the sortable.

Via ui.helper you can access your newly inserted element.

  $('#sortable').sortable().droppable().on('sortreceive', function(event, ui) {
    var inserted_element = $(ui.helper);
    // modify your element
  });

score 1 · Accepted Answer · answered Nov 19 '12 at 14:51

I just ran into the same issue from a different angle. My sortable/droppable was firing off an over event and a drop event when all I wanted was the drop event. Using your code, here's how I fixed it:

    $('#sortable').sortable()
    $('#draggables li').draggable({
        connectToSortable: '#sortable',
        helper: 'clone',
        revert: 'invalid',
        cursor: 'move'
    });
    $('#sortable').sortable('disable'); 
    // disable the *sortable* functionality while retaining the *droppable*
    $('#sortable').droppable({
    // Drop should only fire when a draggable element is dropped into the sortables,
    // and NOT when the sortables themselves are sorted (without something being dragged into).
    drop: function(ev, ui){
        $(ui.draggable).html('<div>TEMPLATE</div>');
    }
    });

The only disadvantage is that all functionality within the sortable.update event must now be placed in the droppable.drop event.

By the looks of your code, and after attempting it, all that `$("#sortable").sortable('disable');` does is disable all of the sortable functionality entirely, making the list unsortable 100% of the time. I am only not downvoting because, I might be in error? — VoidKing, Sep 06 '13 at 17:06

score 1 · Answer 3 · answered Dec 03 '13 at 20:55

perhaps this can help :

See this fiddle for code, I change it:

http://jsfiddle.net/penjepitkertasku/CxpMn/34/

$('#sortable').sortable();
$('#sortable').droppable({
    drop: function(ev, ui){
        $(ui.draggable).html('<div>' + ui.draggable.text() + '</div>');
    }
});
$('#draggables li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid',
    cursor: 'move'
});

jQuery UI drop event of droppable fires on sortable

3 Answers3

Linked