Question

I am using the jQuery library 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:

<div class='block'>     <asp:Image ID='Image9' AlternateText='10/12/2008 - Retina' Width=81 Height=84 ImageUrl='~/uploads/ImageModifier/retina.jpg' runat=server /> </div> 

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 doesn’t seem to work.

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)          }