Перетащите анимированный объект с помощью 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, чтобы принять во внимание местоположение окна при запуске анимации и настроить продолжительность.