Question

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

drop:function (event,ui) {

$(ui.draggable).remove();

}

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

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

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

我做了一个小提琴演示：

http://jsfiddle.net/7kEn8/

将它放在第一个（蓝色）垃圾箱中，然后将其正常删除，将其放入第二个（黄色）垃圾箱中，然后淡出该项目，然后列表不再可排序。我确定我错过了一些非常基本的东西，但我不确定是什么。小提琴使用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％确定为什么，但是调试，fadeout会隐藏对象，但实际上并没有删除它。不确定为什么会影响可排序，但是进行上述更改似乎有效。调试此解决方案时，项目被标记为显示无，而不是不可见，我只能假设这是导致可排序扩展问题的原因，但这纯粹是猜测。

希望有所帮助。

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

    });

}

使用淡入淡出删除元素时，jquery可排序中断，删除时不带淡入淡出

2 个答案: