如何使用jQueryUI交換可拖動的動畫？

Question

看起來很簡單，但我無法得到這個工作。我在兩個不同的droppables裏有兩個可拖動的。當我從一個droppable放置一個可拖動到另一個時，現有的可拖動應該動畫移動到另一個可放置區域。

$('.droppable').droppable({ 
    hoverClass: 'hoverClass', 
    drop: function(event, ui) { 
     var $from = $(ui.draggable), 
      $fromParent = $from.parent(), 
      $to = $(this).children(), 
      $toParent = $to.parent(); 

     // This is where I replace draggables' positions without animation 
     $toParent.html($from.css({left: '', top: '', 'z-index': ''})); 
     $fromParent.html($to); 
     makeDraggable(); 
    } 
}); 

http://jsfiddle.net/codef0rmer/AywmJ/

Answer 1

哇噢！我自己想清楚了。

演示：http://jsfiddle.net/codef0rmer/AywmJ/2/

就寫了這個小碼用於交換：

function swap($el, fromPos, toPos, duration, callback) { 
    $el.css('position', 'absolute') 
     .css(fromPos) 
     .animate(toPos, duration, function() { 
     if (callback) callback(); 
     }); 
} 

和更新丟棄事件：

$('.droppable').droppable({ 
    hoverClass: 'hoverClass', 
    drop: function(event, ui) { 
     var $from = $(ui.draggable), 
      $fromParent = $from.parent(), 
      $to = $(this).children(), 
      $toParent = $(this); 

     window.endPos = $to.offset(); 

     swap($from, $from.offset(), window.endPos, 200); 
     swap($to, window.endPos, window.startPos, 1000, function() { 
     $toParent.html($from.css({position: 'relative', left: '', top: '', 'z-index': ''})); 
     $fromParent.html($to.css({position: 'relative', left: '', top: '', 'z-index': ''})); 
     makeDraggable(); 
     }); 
    } 
});