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