如何“銷毀”可拖動對象，然后重新啟用它？

Question

我有一個可沿Y軸拖動的div。 當div達到50px時，我銷毀了可拖動元素，然后執行動畫以將其移回起點，一旦動畫完成，如何使該元素再次變為可拖動元素？

這是小提琴

$( ".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/