Question

A small question hopefully with a simple answer, I am using jQuery draggable and droppable to place items into a dock. Using the below code for the drop.

$("#dock").droppable({
            drop: function(event, ui) {
                //Do something to the element dropped?!?
            }
        });

However I couldn’t find a way to get what element was actually dropped, so I can do something do it. Is this possible?

Answer 1

From the drop event documentation:

This event is triggered when an
accepted draggable is dropped ‘over’
(within the tolerance of) this
droppable. In the callback, $(this)
represents the droppable the draggable
is dropped on. While ui.draggable represents
the draggable.

So:

$("#dock").droppable({
     drop: function(event, ui) {
               // do something with the dock
               $(this).doSomething();

               // do something with the draggable item
               $(ui.draggable).doSomething();
           }
});