jQuery Droppable, get the element dropped

JqueryJquery UiJquery Ui-DraggableJquery Ui-Droppable

Jquery Problem Overview


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?

Jquery Solutions


Solution 1 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionPez CuckowView Question on Stackoverflow
Solution 1 - Jquerykarim79View Answer on Stackoverflow