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?

Answer 1

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/