JQuery drag and drop - how to get at element being dragged

Question

Hi, I am using the JQuery libs to implement drag and drop.

How do I get at the element that is being dragged when it is dropped?

I want to get the id of the image inside the div. The following element is dragged:

I have the standard dropped function from their example

$(".drop").droppable({
                 accept: ".block",
                 activeClass: 'droppable-active',
                 hoverClass: 'droppable-hover',
                 drop: function(ev, ui) { }
});

I have tried various ui.id etc which doesnt seem to work.

Thanks,

Answer 1

Is it not the ui.draggable?

If you go here (in Firefox and assuming you have firebug) and look in the firebug console youll see I am doing a console.dir of the ui.draggable object which is the div being dragged

http://jsbin.com/ixizi

Therefore the code you need in the drop function is

       drop: function(ev, ui) {
                 //to get the id
                 //ui.draggable.attr('id') or ui.draggable.get(0).id or ui.draggable[0].id
                 console.dir(ui.draggable)  
       }

Answer 2

redquare is right, inside your function refer to ui.draggable:

$(".drop").droppable({ accept: ".block", 
                       activeClass: 'droppable-active', 
                       hoverClass: 'droppable-hover', 
                       drop: function(ev, ui) { 
                           //do something with ui.draggable here
                       }
});

That property points to the thing being dragged.

Note that if you're using cloned "helpers", the draggable will be the cloned copy, not the original.

Answer 3

$(ui.draggable).attr("id")

Answer 4

Does anyone know where I can find a list of parameters included with various jQueryUI callbacks and events? Their site - for what I can tell - has little to no details on this.