Unify drop animation between jQuery UI's Sortable and Draggable

Question

I'd like to achieve the same visual effect when dropping either a sortable or a draggable to a droppable, in this case namely jQuery's simple hide animation.

The following works perfectly for draggable items:

$( '.droppable' ).droppable( {
    drop: function( event, ui ) {
        ui.draggable.hide( 500 );
    }
} );

When dropped, the dragged draggable beautifully animates to be hidden while visually remaining on top of the droppable. In the case of a sortable, however, the dragged item first reverts back to its original position, and then hides.

See this fiddle for a working example, and try dragging any of the yellow (sortable) or green (draggable) items into the red (droppable) region: http://jsfiddle.net/tYfNb/

Any ideas?

Those .sortable item doesn't really get dropped into the .droppable region, hence the problem. Comment out the 3rd line and you'll see the difference on jsfiddle. — Alvin K.

mike mike · Accepted Answer · 2012-08-20T21:09:15

i managed to get it to work by cloning and position the element, its a bit of hack, there probably is a more elegant way.

http://jsfiddle.net/tYfNb/1/

Unify drop animation between jQuery UI's Sortable and Draggable

1 Answers