56

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

105

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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