Question

我有一个沿Y轴可拖动的div。当div达到50px时，我会破坏可拖动元素，然后执行动画以将其移回到开始，如何在动画完成后再次启用该元素可再拖动？

这是一个Fiddle

$( ".box" ).draggable({ 
    axis: "y",
    drag: function( event, ui ) {
        y2 = ui.position.top;
        x2 = ui.position.left;
        $('.result').text(y2);
        if (y2 > 100) {
           $( ".box" ).draggable('destroy')
           $('.box').animate({
               top:0
           }, {
               duration:500,
               complete: function() {
                   //$( ".box" ).draggable('enable');//doesn't work
                   $( ".box" ).draggable({axis: "y"});
               }
           })
         }
    }

});

Answer 1

你应该这样做：

object.draggable( 'disable' )

这将禁用该对象，并且它不会被拖动。

object.draggable( 'enable' )

之后，您可以重新启用对象上的拖动。

Answer 2

稍微调整一下user2436738的答案就可以了。

您只需要阻止拖动事件更新位置，同时将框动画回原始位置：

var reverting = false;
$(".box").draggable({
    axis: "y",
    drag: function(event, ui) {
        var y2 = ui.position.top;
        var x2 = ui.position.left;
        $('.result').text(y2);

        if (reverting){
            event.preventDefault();
            event.stopImmediatePropagation();
        } else if (y2 > 100) {
            reverting = true;
            revertDrag($('.box'));
        }
    }
});

function revertDrag(element){
    element.draggable('disable');
    element.animate({
        top: 0
    }, {
        duration: 500,
        complete: function() {
            reverting = false;
            element.draggable('enable');
        }
    })
}

以下是一个工作示例：http://jsfiddle.net/Sly_cardinal/F3h2Q/12/

如何“销毁”可拖动的对象，然后再次重新启用它？

2 个答案: