[jQuery] Draggable+Sortable and ui.item
I am building a basic draggable+sortable page based on this demo:<div>
</div><div><a href="http://jqueryui.com/demos/draggable/#sortable">http://jqueryui.com/demos/draggable/#sortable</a></div><div>
</div><div><a href="http://jqueryui.com/demos/draggable/#sortable"></a>My sortable list will start out empty and the user can drag various draggables onto the sortable. </div>
<div>
</div><div>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. </div>
<div>
</div><div>Here is my code:</div><div>
</div><div><font class="Apple-style-span" face="'courier new', monospace">$('ul.selected').sortable({</font></div><div><font class="Apple-style-span" face="'courier new', monospace"> revert: true</font></div>
<div><font class="Apple-style-span" face="'courier new', monospace">});</font></div><div><font class="Apple-style-span" face="'courier new', monospace">
</font></div><div><font class="Apple-style-span" face="'courier new', monospace">$('ul.available li').draggable({</font></div>
<div><font class="Apple-style-span" face="'courier new', monospace"> connectToSortable: '.selected',</font></div><div><font class="Apple-style-span" face="'courier new', monospace"> helper: 'clone',</font></div>
<div><font class="Apple-style-span" face="'courier new', monospace"> revert: 'invalid'</font></div><div><font class="Apple-style-span" face="'courier new', monospace">});</font></div><div><font class="Apple-style-span" face="'courier new', monospace">
</font></div><div><font class="Apple-style-span" face="'courier new', monospace">$('ul.selected, ul.available').disableSelection();</font></div><div><font class="Apple-style-span" face="'courier new', monospace">
</font></div><div><font class="Apple-style-span" face="'courier new'" size="2"><span class="Apple-style-span" style="font-size: 10px;">// Attempt to add image to new item in sortable list</span></font></div><div><font class="Apple-style-span" face="'courier new', monospace">$('.selected').bind('sortreceive', function(event, ui) {</font></div>
<div><font class="Apple-style-span" face="'courier new', monospace"> $(ui.item).append('<img src="delete.png" />'); // Does not work -- image is added to the draggable, not to the sortable's received item</font></div>
<div><font class="Apple-style-span" face="'courier new', monospace">});</font><br clear="all">
</div><div>Is there another way to get the item that was just added to the sortable?</div><div>
--
Hector
</div>