使用淡入淡出删除元素时，jquery可排序中断，在不淡入淡出的情况下移除OK

Question

我有一个可排序的列表和一个可放置的“垃圾区”，这样当我将列表中的一个元素放入垃圾区时，该元素会通过

drop:function (event,ui) {

$(ui.draggable).remove();

}

这很好用。但是，我想在元素被删除之前淡出它。所以我做了一个淡出，然后在回调中调用remove，像这样

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

当我这样做时，元素会淡出，但我的列表不再可排序。控制台中没有报告任何内容。

我做了一个小提琴来演示：

http://jsfiddle.net/7kEn8/

将其放入第一个（蓝色）bin 并正常删除，将其放入第二个（黄色）bin 并淡出该项目，然后列表不再可排序。我确定我错过了一些非常基本的东西，但我不确定是什么。小提琴使用fadeOut 方法，我也尝试过使用jquery ui addClass。感谢阅读！

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

不是 100% 确定原因，但调试时，淡出隐藏了对象，但实际上并没有被删除。不知道为什么这会影响可排序，但进行上述更改似乎有效。调试此解决方案时，项目被标记为不显示，而不是不可见，我只能假设这是导致可排序扩展出现问题的原因，但这纯粹是猜测。

希望对您有所帮助。

Answer 2

编辑：在 Tyler 的修改之后，这对我来说似乎是最好的方法，关键是淡出 $(ui.draggable) 但删除 $(ui)：

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

我找到了一个解决方案，但我不喜欢它，因为我认为它没有必要。正确的效果是通过克隆元素，移除原始元素，将克隆元素放置在与原始元素相同的位置，然后淡化克隆元素并移除它，像这样

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

    });

}