jquery sortable breaks when removing element with fade, OK when removing without fade

Question

I have a sortable list, and a droppable "trash zone" such that when I drop an element of the list into the trash zone, the element is removed via

drop:function (event,ui) {

$(ui.draggable).remove();

}

This works just fine. However, I want to fade the element out before it is removed. So I do a fadeout, and then call remove in the callback, like this

drop:function (event,ui) {
$(ui.draggable).fadeOut( "slow", function() {
$(this).remove();
});
}

when I do that, the element fades out, but then my list is no longer sortable. Nothing is reported in the console.

I have made a fiddle to demonstrate:

http://jsfiddle.net/7kEn8/

Drop it in the first (blue) bin and it removes normally, drop it in the second (yellow) bin and it fades out the item, then the list is no longer sortable. I'm sure I am missing something really basic but I am not sure what. The fiddle uses the fadeOut method, I have also tried with jquery ui addClass. Thanks for reading!

Answer 1

$('#sortable').sortable({revert:300});
$('#dropzone1').droppable({
hoverClass:"dropHover",
drop:function (event,ui) {

$(ui.draggable).remove();

}
});

$('#dropzone2').droppable({
hoverClass:"dropHover",

    drop:function (event,ui) {
        var item = $(ui);
        $(ui.draggable).fadeOut( "slow", function() {
            $(item).remove();
        });
}
});

Not 100% sure why, but debugging, the fadeout hides the object, but it actually wasn't removed. Not sure why that affects the sortable, but making the above changes appears to work. Debugging this solution, the items are marked as display none, instead of invisible and I can only assume that is what caused issues with the sortable extension but it is purely speculation.

Hope that helps.

Answer 2

EDIT: after Tyler's revision, this looks like the best method to me, the key being to fade out $(ui.draggable) but to remove $(ui):

    drop:function (event, ui) {
        $(ui.draggable).fadeOut("slow", function() {
            $(ui).remove();
        });
    }

I found a solution, but I don't like it because I don't think it should be necessary. The proper effect is achieved by cloning the element, removing the original, placing the clone is the same position as the original, then fading the clone and removing it, like this

drop:function (event, ui) {

    var coords = $(ui.draggable).offset();
    //clone the object
    var theClone = $(ui.draggable).clone();
    theClone.css('list-style-type', 'none');
    $(document.body).append(theClone);
    theClone.offset({top: coords.top, left: coords.left});
    //remove the element
    $(ui.draggable).remove();
    //fade the clone
    theClone.fadeOut("slow", function() {

        //remove in the callback
        theClone.remove();

    });

}