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?

Solution 1

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.

Solution 2

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
  });

Solution 3

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'
});