58

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?

1 Answer 1

107

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();
           }
});
5
  • Do the active css classes need to be removed
    – aroos
    Commented Mar 1, 2014 at 5:22
  • For me, this leaves the element with drag state, position: relatative and left/right co-ordinates
    – Tom B
    Commented May 15, 2015 at 14:07
  • How exactly do you select the draggable within the doSomething() function?
    – user5176037
    Commented Aug 18, 2015 at 19:53
  • This 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
    – MaxySpark
    Commented Mar 25, 2016 at 21:37
  • 3
    I had to use ui.draggable[0] . ui.draggable is an array.
    – Ryan Leach
    Commented May 24, 2017 at 2:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.