jQuery Droppable, get the element dropped
63,348
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. Whileui.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();
}
});
Author by
Pez Cuckow
If you'd like to work with me to solve a technical problem you're experiencing please send an email to the details on my website, we can negotiate an hourly rate and I can dig into your code!
Updated on July 15, 2022Comments
-
Pez Cuckow almost 2 years
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?
-
aroos about 10 yearsDo the active css classes need to be removed
-
Tom B about 9 yearsFor me, this leaves the element with drag state, position: relatative and left/right co-ordinates
-
Admin over 8 yearsHow exactly do you select the draggable within the doSomething() function?
-
MaxySpark about 8 yearsThis code is working.
$("#drag").draggable(); $("#drop").droppable({ drop: function (event, ui) { $(this).css("background-color","red"); } }); $("#drop").droppable({ out: function( event, ui ) { $(this).css("background-color","yellow"); } });
why this code is not working?$("#drag").draggable(); $("#drop").droppable({ drop: function (event, ui) { $(this).css("background-color","red"); } out: function( event, ui ) { $(this).css("background-color","yellow"); } });
codepen -
Ryan Leach almost 7 yearsI had to use ui.draggable[0] . ui.draggable is an array.