jquery - 如何使用 jQueryUI 将可拖动对象与动画交换？

Question

这看起来很简单，但我无法让它工作。我在 2 个不同的 droppables 中有两个 draggables。当我将一个可拖放对象从一个可拖放对象放置到另一个对象时，现有的可拖动对象应设置动画以移动到另一个可拖放区域。

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

并更新了 drop 事件：

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