0

それは非常に単純に思えますが、これを機能させることができませんでした。2 つの異なる droppables 内に 2 つの 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/

4

1 に答える 1

3

ウーフー!!! 私はそれを自分で理解しました。

デモ： 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();
      });
    }
});
于 2012-12-01T19:04:45.663 に答える