jquery sortable breaks при удалении элемента с fade, OK при удалении без выцветания

Question

У меня есть отсортированный список и недоступная «зона мусора», чтобы при отбрасывании элемента списка в зону мусора элемент удалялся через

drop:function (event,ui) { 

$(ui.draggable).remove(); 

} 

Это работает просто отлично. Тем не менее, я хочу, чтобы исчезнуть элемент до его удаления. Так что я не делаю FadeOut, а затем вызвать удалить в обратный вызов, как этот

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 скрывает объект, но он на самом деле не был удален. Непонятно, почему это влияет на сортируемое, но выполнение вышеуказанных изменений, похоже, сработает. Отлаживая это решение, элементы отмечены как display none, а не невидимые, и я могу только предположить, что это вызвало проблемы с сортируемым расширением, но это чисто спекуляция.

Надеюсь, что это поможет.

Answer 2

EDIT: после пересмотра Тайлера, это выглядит как лучший способ для меня, ключ в том, чтобы исчезнуть из $(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(); 

    }); 

}