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

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.

Answers:

Answer

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
$(ui.draggable).attr("id")    

...

Answer

The ui.draggable() does not seem to work any more. To get the id one can use

$(event.target).attr("id");
Answer

I tried most of the above, but in the end only

event.target.id

worked for me.

Answer

ANSWER THAT WORKS IN 2017

A lot of time has passed by, and I found that the current accepted answer no longer works.

A solution that currently works:

$('#someDraggableGroup').draggable({
                helper: 'clone',
                start: function( event, ui ) {
                    console.log(ui.helper.context)
                    console.log(ui.helper.clone())
                }
            })

Here, ui.helper.context refers to the original object you're trying to drag, and clone() refers to the cloned version.

EDIT

The above is too see which object you're dragging using the draggable() function. For detecting what draggable object was dropped in a droppable(), the following works:

$('#myDroppable').droppable({
    drop: function(event, ui){
        console.log(ui.draggable.context)
                 OR
        console.log(ui.draggable.clone() )
    }
})
Answer

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

i got

drop: function( event, ui ) {alert(ui.draggable.attr("productid"));}
Answer

How to manipulate clone object in any jquery ui operation ?

Just target ui outer html and use normal html jquery selectors

var target_ui_object_html=$(ui.item.context).attr("your attributes");

attributes => id ,class ,rel,alt ,title or custom attr like data-name , data-user

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.