CODEWITHSUNDEEP
javascriptjquerydrag-and-drop
alexmac
alexmac

Reputation: 4201

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.

Upvotes: 38

Views: 90842

Answers (8)

Shailesh Dwivedi
Shailesh Dwivedi

Reputation: 691

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

Upvotes: 0

Maurits Moeys
Maurits Moeys

Reputation: 1250

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

Upvotes: 7

Zak
Zak

Reputation: 

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

...

Upvotes: 13

Daniel Mlodecki
Daniel Mlodecki

Reputation: 96

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

event.target.id

worked for me.

Upvotes: 6

Desperado
Desperado

Reputation: 36

i got 

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

Upvotes: 2

karvonen
karvonen

Reputation: 676

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

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

Upvotes: 12

redsquare
redsquare

Reputation: 78687

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

Upvotes: 41

Adam Bellaire
Adam Bellaire

Reputation: 110539

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.

Upvotes: 3

Related Questions