After some more testing I came to a solution, but it still puzzles me that
my original code did not work as expected.
I found that ui.item changes to the item I need in the "sortdeactivate"
callback. I can now add a delete image to the item, but now I have to first
test it to make sure it doesn't already have one. This condition is required
because "sortdeactivate" is fired each time to sortable is deactivated.
The new bind looks like this, and replaces my previous bind:
$('.selected').bind('sortdeactivate', function(event, ui) {
// Add "delete" image to item
var item = ui.item;
if (!item.find('img.delete').length) {
var img = $('<img src="delete.png" class="delete");
img.click(function(event) {
item.remove();
});
item.append(img);
}
});
This now properly creates a delete button on new items that are dragged onto
the sortable and they are removed when the image is clicked.
But I also noticed a new bug. If I begin to drag a draggable from the
"available" container but release the mouse button before dragging it onto
the sortable, the "sortdeactivate" is fired and the delete button is placed
on the draggable! This is really puzzling because the cursor was never
placed over the selectable, yet the selectable event is firing. I also
noticed that the related event "sortactivate" fires immediately upon
dragging.
One thing I found that can help me determine if the draggable was dropped
onto a sortable is to check for a ui.sender property. It's not an elegant
solution, but it works.
The final working bind looks like this:
$('.selected').bind('sortdeactivate', function(event, ui) {
// Return early if the item did not come from another list
if (!ui.sender) return;
// Add "delete" image to item
var item = ui.item;
if (!item.find('img.delete').length) {
var img = $('<img src="delete.png" class="delete");
img.click(function(event) {
item.remove();
});
item.append(img);
}
});
--
Hector
On Mon, Jul 6, 2009 at 9:38 AM, Hector Virgen <djvir...@gmail.com> wrote:
> 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
>
