如何「銷燬」可拖動的對象，然後重新啓用它？

Question

我有一個div可以沿着Y軸拖動。當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

稍微調整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/

Answer 2

你倒是應該這樣做：

object.draggable('disable') 

這將禁用對象，它不會可拖動。

object.draggable('enable') 

之後，您可以重新啓用對象的拖動。