We Keep Coding

jQuery UI draggable: Access dragged element when using helper: clone

I have a set of jquery UI draggables that are connected to a sortable via helper: 'clone'. In the receive event of the draggable I want to access the element that just got put into the list, but there does not seem to be any way of doing this.
My code is similar to this:
$('#drag li').draggable({
helper: 'clone',
revert: 'invalid',
connectToSortable: '#sort'
});
$('#sort').sortable({
receive: function(evt, ui) {
ui.item.css('color', 'green');
ui.helper.css('color', 'green');
}
});
ui.item refers to the original draggable, pre-clone, while ui.helper seems to not exist anywhere in the document after the item has been dropped.
See this jsfiddle for an example: http://jsfiddle.net/KSuPX/
Update: Sorry if my actual question is a bit unclear. A summary:
When the sortable list receives a new element, how do I access that element?

Sortable and draggable are 2 different widgets and maybe you would need edit the .js file if no solution works. And unfortunately jQuery UI does not provide detailed examples on how these functions work. You could try using the option 'sender' under receive as mentioned here - http://api.jqueryui.com/sortable/#event-receive

When cloning a draggable object in jQuery UI, how can you transfer the data and events to the new element?

I have a draggable element with the helper: 'clone' set, but when it clones the element, none of the data() or events are persistent in the new element.
I've tried a number of ways to reattach the data(), but I can't seem to select the new element as well as the old element in the same statement.
For instance, I can select the initial element in the draggable stop() event:
$blah.draggable({
helper: 'clone',
stop: function(ev, ui) {
var oldData = $(ev.target).data('blah');
}
});
And I can also get the new element in the droppable drop() event:
$blah.droppable({
drop : function(ev, ui) {
var $newElement = ui.draggable;
}
});
But I can't figure out a way to get both in the same event.
What I'd like to do is somehow transfer the data, e.g.:
$newElement.data('blah', $oldElement.data('blah'));
Or otherwise make the data persistent, like you can with $blah.clone(true);

To get access to the data of original element in drop you can use ui.draggable.context. In the example below context would refer to the original dragged element and you have access to all of its content. Draggable refers to the new element that is being dropped.
$("#droppable").droppable({
drop: function(ev, ui) {
console.log(ui);
console.log(ui.draggable.context);
console.log($(ui.draggable.context).data('pic'));
}
});

I haven't worked too extensively with droppable, but couldn't you just do something like this?
$(".draggable").draggable({
helper: 'clone'
});
$("#droppable").droppable({
drop: function(ev, ui) {
$(this).append(ui.draggable.clone(true));
}
});
Seems to work unless there's something I'm missing:
http://jsfiddle.net/hasrq/

Turns out the problem was sortable, not draggable / droppable (I was attaching sortable later on, but figured it wasn't part of the problem here so I left it out of the original question).
I ended up using sort of a combination of #kingjiv's solution above, along with a not-the-greatest hack but at least it seems to be working:
$blah.sortable({
receive: function(ev, ui) {
// setting a global variable here
MyGlobals.cloneCache = ui.item.clone(true);
},
stop: function(ev, ui) {
$(ui.item).replaceWith(MyGlobals.cloneCache);
}
});
The idea is that you first clone the original item in the receive() event, cache this in a variable, and then replace the item with that in the stop() event.
Kind of ugly but at least it's working.

ui.item refers to dragged item. When the dragged item is cloned, there is no built-in way to access the target item from receive function. However, there is a bit hacky way how to do it:
$blah.sortable({
receive: function (ev, ui) {
var $target = $(this).data().sortable.currentItem;
var $source = $(ui.sender);
// now you can copy data from source to target
$target.data('data-item', $source.data('data-item'));
}
});

How do I trigger a function with whatever table row I just dropped in jQuery UI Sortable?

I am working with jQuery UI Sortable plugin, and applying it to a table. How would I trigger a function when dropping whatever element I am dragging? Something similar to below:
alert($(this).attr('id'));
Full Solution
For this, you have to set the container id's to something_number (something_1, something_2, etc).
$(function(){
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
update: function(event, ui){
var order = $('#sortable').sortable('serialize');
alert(order);
}
});
$("#sortable").disableSelection();
});

This can be done easily be using stop event. Details are documented here.
Quick example:
$( "#your-id" ).sortable({
stop: function(event, ui) {
alert($(this).attr('id'));
}
});
You can alternatively give a try to other events like update depending on what are you needs exactly.

Editing draggable after it's added to a sortable

Hey, I'm trying to work out what event I need to bind to and what property I need to use to get a reference to the DOM element for the dropped item (That is the item in the receiving list.
Here's what I have so far...
<ul id="toolbox">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<ul id="existing">
</ul>
<script language="javascript">
$('#existing').sortable({
revert: true
});
$('#toolbox li').draggable({
connectToSortable: '#existing',
helper: 'clone',
revert: 'invalid',
});
</script>
My objective is to turn, for example, A into something else once it's dropped into the #existing ul (Anything else will suffice - the real implementation is far more complex. I just need to get my hands on that DOM element).
I have tried the following as the receive for my sortable:
function receive(ev, ui)
{
$(this).append('<b>this</b>');
ui.sender.append('<b>sender</b>');
ui.item.append('<b>item</b>');
}
But this appears to be the #existing UL, sender and item are both the li that was dragged in toolbox. What I'm looking for is the newly created li inside #existing. Is there a property or another event which will give me what I'm after?

I recently had the same issue. I solved it with the following:
$('#existing').droppable({
drop: function(e, ui) {
// ui.draggable is the node that gets created in #existing
// ui.draggable[0].originDragger is the node that was
// dragged from #toolbox
}
}).sortable({
revert: true
});

I haven't tried either of these, but in theory, they seem like they would work. First, if you made the ul#existing also a droppable, you could do something on the drop event, such as get the info you need from that li, like it's text(), remove that object from the DOM and generate a new element.
Orrr, you could do something on the stop event of your draggable, like check whether the elements parents are now ul#existing. Hope this helps.

do not bind to sortreceive, instead bind to sortout like so
$("#sortable").bind('sortout', function(event, ui) {
console.log(ui.item);
});
OR
$("#sortable").sortable({ //during initialization
out:function(event, ui) {
console.log(ui.item);
}
});
in this case ui.item will be the element you are looking for

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.

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

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

The ui.draggable() does not seem to work any more. To get the id one can use
$(event.target).attr("id");

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

I tried most of the above, but in the end only
event.target.id
worked for me.

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.

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

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