[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


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
Score: 13



Score: 12

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

Score: 7


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:

                helper: 'clone',
                start: function( event, ui ) {

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


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:

    drop: function(event, ui){
        console.log(ui.draggable.clone() )
Score: 6

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


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

More Related questions