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

Accepted answer

Score: 41

Is it not the ui.draggable?

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

http://jsbin.com/ixizi

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

Score: 13

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

...

Score: 12

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

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

Score: 7

ANSWER THAT WORKS IN 2017

A lot of time has passed by, and I found 8 that the current accepted answer no longer 7 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 6 to the original object you're trying to 5 drag, and clone() refers to the cloned version.

EDIT

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

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

Score: 6

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

event.target.id

worked for me.

Score: 3

redquare is right, inside your function 4 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 3 being dragged.

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

Score: 2

i got

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

Score: 0

How to manipulate clone object in any jquery ui operation ?

Just target ui outer html and use normal 2 html jquery selectors

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

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

Source: stackoverflow.com

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

Drag and Drop: How to get the URL of image being dropped if image is a link (not the url of the link)

Alternative to Gridster?

html drag/drop setDragImage doesnt set ghost image on first drag

jQuery Drag-and-Drop Image Upload Functionality

Drag and drop table row from one tabs table to another tabs table - Jquery

Html5 drag and drop on svg element

How do I highlight a droppable area on hover using jquery ui draggable

jQuery pass element to dataTransfer property

How can you bind an event handler only if it doesn't already exist?

Drag-Drop elements between parent frame and child iframe