jqueryjquery-uijquery-ui-draggablejquery-ui-droppable

jQuery Droppable, get the element dropped


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?


Solution

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