正确重置可拖动的jquery实例

时间:2014-07-09 12:14:41

标签: jquery jquery-ui draggable jquery-ui-draggable

检查出来...... 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很新,所以可能有一些明显的东西!

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

 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毫秒)