jquery sortable 在删除带有淡入淡出的元素时中断，在删除不带淡入淡出的元素时可以

Question

我有一个可排序的列表和一个可放置的“垃圾区”，这样当我将列表的一个元素放入垃圾区时，该元素将通过以下方式删除

drop:function (event,ui) {

$(ui.draggable).remove();

}

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

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

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

我做了一个 fiddle 来演示:

http://jsfiddle.net/7kEn8/

将它放入第一个(蓝色)容器中，它会正常移除，将它放入第二个(黄色)容器中，它会淡出元素，然后列表不再可排序。我确定我错过了一些非常基本的东西，但我不确定是什么。 fiddle 使用 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% 确定原因，但调试时，淡出隐藏了对象，但它实际上并没有被删除。不确定为什么会影响可排序，但进行上述更改似乎有效。调试此解决方案时，元素被标记为不显示，而不是不可见，我只能假设这是导致可排序扩展出现问题的原因，但这纯粹是推测。

希望对您有所帮助。