用jquery拖動動畫對象？

Question

這裏有一個小提琴，黑盒子在屏幕上緩慢移動。我也希望能夠拖動黑盒子並將其移入粉紅色框中，但我無法弄清楚。我試圖使用下面的代碼，但它一直在打破。我是一個新手，所以如果你能提供幫助，請儘可能多地給予解釋。非常感謝！

更新：對不起，我最初錯了小提琴張貼。這是正確的，現在

http://jsfiddle.net/mjmitche/LeztD/1/

$(function() { 
     $("#draggable, #draggable-nonvalid").draggable(); 
     $("#droppable").droppable({ 
      accept: "#draggable", 
      activeClass: "ui-state-hover", 
      hoverClass: "ui-state-active", 
      drop: function(event, ui) { 
       $(this) 
        .addClass("ui-state-highlight") 
        .find("p") 
         .html("Dropped!"); 
      } 
     }); 
    }); 

Answer 1

您需要拖動開始時停止動畫：

http://jsfiddle.net/LeztD/2/

$("#draggable").draggable({ 
    start: function() { 
     $(this).stop(); 
    }, 
    stop: function(){ 
     cloudMove(); 
    } 
}); 

當你開始拖動此代碼基本上停止動畫並在您釋放它時啓動備份。

您可能需要修改cloudMove以在動畫開始時考慮框的位置並調整持續時間。