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.

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

回答2:

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

...

回答3:

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

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

回答4:

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

event.target.id

worked for me.

回答5:

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

回答6:

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.

回答7:

i got

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

回答8:

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

来源：https://stackoverflow.com/questions/197489/jquery-drag-and-drop-how-to-get-at-element-being-dragged

标签

javascript

jquery

drag-and-drop