正确重置可拖动 jquery 实例答案

【问题标题】：properly reset draggable jquery instance正确重置可拖动 jquery 实例
【发布时间】：2014-07-09 12:14:40
【问题描述】：

检查一下...http://thetally.efinancialnews.com/tallyassets/suebanks/suebanks.html

好的，我在右边有 20 个左右的可拖动元素。您可以将其中之一拖到左侧的“法官”上，下面的所有或大部分人都会消失。然后您可以按重置。

到目前为止，一切都很好，只有当您再次尝试此过程时，您才会意识到某些东西没有正确重置。如果您执行该过程的第一部分，则会出现大量延迟，并且人员会消失。我在我的脚本中看不到任何要求它等待这么长时间的东西。我很困惑，我以为我的代码会正确重置所有内容，我错过了什么吗？

这是 jQuery...

$( init );

function init() {

    $("#reset").click(function(){


revertDraggable($(".draggable"));

}); 

$('.draggable').draggable( {
containment: '#maincontain',
stack: '.bankbox div',
cursor: 'move',
revert: 'invalid'
} );
$('.judge').droppable( {
drop: handleDropEvent
} );
}

function handleDropEvent(event, ui) {
 if (!ui.draggable.data("originalPosition")) {
        ui.draggable.data("originalPosition",
            ui.draggable.data("draggable").originalPosition);
    }
var draggable = ui.draggable;
ui.draggable.addClass( "dropped" );
$(".bank").addClass( "undraggable" );
$(".draggable").draggable({
cancel: ".undraggable"
});
ui.draggable.position({
    of: $(this),
    my: 'center bottom',
    at: 'center bottom'
});



var lawyers = $('.lawyers .lawyer');
lawyers.not('.'+draggable.attr('id')).fadeTo( "slow" , 0.1);
lawyers.filter('.'+draggable.attr('id')).fadeTo( "slow" , 1);
}

function revertDraggable($selector) {
$selector.each(function() {
    var $this = $(this),
        position = $this.data("originalPosition");

    if (position) {
        $this.animate({
            left: position.left,
            top: position.top
        }, 500, function() {
            $this.data("originalPosition", null);
        });
    }

    $( ".lawyer" ).fadeTo( "slow" , 1);

    $(".bank").removeClass( "undraggable" );

});

}

我对 jQuery 还很陌生，所以可能有一些非常明显的东西！

感谢您的帮助！

【问题讨论】：

标签： jquery jquery-ui draggable jquery-ui-draggable

【解决方案1】：

 function revertDraggable($selector) {
    $selector.each(function() {
        var $this = $(this),
            position = $this.data("originalPosition");
        if (position) {
            $this.animate({
                left: position.left,
                top: position.top
            }, 500, function() {
                $this.data("originalPosition", null);
                $( ".lawyer" ).fadeTo( "slow" , 1); // <--Move this line to here
            });
        }
        $(".bank").removeClass( "undraggable" );
    });
 }

在动画延迟后重置褪色的.lawyer 元素。（在这种情况下为 500 毫秒）

【讨论】：