Editing draggable after it's added to a sortable

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.