取消jQuery的可拖動對象或重置

Question

我想加載一個對象的頁面，可以拖動到地圖/ div但希望有一個清除/撤消按鈕？這可能與jQuery的？

您可以在前面的問題看代碼

jQuery UI droppables - changing the image that's dropped

Answer 1

這可能是一個簡單的調用.animate()（這畢竟是所有jQueryUI的是做）和一些邏輯，以保持軌道你正在拖動的元素的原始位置（jQueryUI已經部分爲你處理）。

1. 使用.data()您可拖動元素的原始位置，你droppable對象的.drop()事件追蹤：

   $("#drop").droppable({ 
       drop: function(event, ui) { 
        if (!ui.draggable.data("originalPosition")) { 
         ui.draggable.data("originalPosition", 
          ui.draggable.data("draggable").originalPosition); 
        } 
       } 
   }); 
   

   基本上這只是設置數據稱爲「originalPosition」拖動的元素上。這假設你能夠繼續拖動元素到一個有效的拖放區域中（因此拖動後它不會覆蓋原來的位置）。

2. 創建您調用動畫拖動的對象恢復到原來的位置的功能：

   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); 
         }); 
        } 
       }); 
   } 
   

   調整動畫的速度，根據自己的喜好。

3. 呼叫從一個事件處理函數：

   $("#undo").click(function() { 
       revertDraggable($(".drag")); 
   }); 
   

這裏有一個工作示例：http://jsfiddle.net/v7N6w/