[jQuery] Draggable+Sortable and ui.item

[Hector Virgen]

I am building a basic draggable+sortable page based on this demo:
http://jqueryui.com/demos/draggable/#sortable

<http://jqueryui.com/demos/draggable/#sortable>My sortable list will start
out empty and the user can drag various draggables onto the sortable.

I want to add a "delete" icon to each of the items that are dragged onto the
sortable so they can be removed. I've tried observing the "sortreceive"
event and manipulating ui.item, but unfortunately ui.item points to the
original draggable instead of the new element that was added to the
sortable.

Here is my code:

$('ul.selected').sortable({
    revert: true
});

$('ul.available li').draggable({
    connectToSortable: '.selected',
    helper: 'clone',
    revert: 'invalid'
});

$('ul.selected, ul.available').disableSelection();

// Attempt to add image to new item in sortable list
$('.selected').bind('sortreceive', function(event, ui) {
    $(ui.item).append('<img src="delete.png" />'); // Does not work -- image
is added to the draggable, not to the sortable's received item
});

Is there another way to get the item that was just added to the sortable?

--
Hector