57

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?

Kara
  • 6,115
  • 16
  • 50
  • 57
Pez Cuckow
  • 14,048
  • 16
  • 80
  • 130

1 Answers1

106

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();
           }
});
Viktor Borítás
  • 135
  • 2
  • 11
karim79
  • 339,989
  • 67
  • 413
  • 406
  • Do the active css classes need to be removed – aroos Mar 01 '14 at 05:22
  • For me, this leaves the element with drag state, position: relatative and left/right co-ordinates – Tom B May 15 '15 at 14:07
  • How exactly do you select the draggable within the doSomething() function? –  Aug 18 '15 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](http://codepen.io/maxyspark/pen/WwOxgQ) – MaxySpark Mar 25 '16 at 21:37
  • 3
    I had to use ui.draggable[0] . ui.draggable is an array. – Ryan Leach May 24 '17 at 02:55