Reputation: 4201
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
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
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
Reputation: 96
I tried most of the above, but in the end only
event.target.id
worked for me.
Upvotes: 6
Reputation: 36
i got
drop: function( event, ui ) {alert(ui.draggable.attr("productid"));}
Upvotes: 2
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
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
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
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