用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以在动画开始时考虑框的位置并调整持续时间。