Question

It seems very simple but I could not get this to work. I’ve two draggables inside 2 different droppables. When I place a draggable from one droppable to another, the existing draggable should animate to move into another droppable area.

$('.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

Woohoo!!! I figured it out myself.

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

Just wrote this small code for swapping:

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

and updated drop event:

$('.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();
      });
    }
});