Jquery 可拖动项目的动画问题

Question

我有一个 jquery 脚本来交换可拖动项目的位置，但出于某种原因，动画效果会在交换过程中导致视觉问题。该脚本是 codef0rmer 的 jsfiddle 的变体，我对其进行了一些更改以满足我的需要。我创建了一个 jsfiddle 来显示问题，目前我已经找到来自交换功能的问题，并注释掉了有效但没有动画的行。如果有人可以帮助我正确设置交换动画，我将不胜感激。您可以在此处查看 jsfiddle：http://jsfiddle.net/AywmJ/161/

这是问题起源的功能（我相信）：

  function swap($el, fromPos, toPos, duration, callback) {
           $el.animate({fromPos, toPos}, duration, callback || $.noop);
           //(callback || $.noop)();
        }

Answer 1

我不熟悉 jquery-动画，但我发现几乎没有什么可以解决交换问题。

当您拖动占位符（"div tag with draggable class"）时，它添加的 syle 属性 style="position: relative; z-index: auto; left: 151px; top: 22px;" 和 left: 151px; top: 22px，表示占位符移动了多远具有 left 和 top 属性的当前位置。

在当前代码中你是 swapping .draggable placeholders，这就是你看到异常行为的原因

而是交换 .draggable 的内容

<div class="pinChildContainer droppable">
      <div class="pins draggable">
            <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" />
            <p class="pinTitle">Payment Services</p>
      </div>
</div>

更改为（现在交换 .pin）

<div class="pinChildContainer droppable">
      <div class="draggable">
            <div class="pins">
                  <img class="pinImage" src="img/paymentServices.jpg" alt="Payment Services" width="188" height="185" />
                  <p class="pinTitle">Payment Services</p>
            </div>
      </div>
</div>

这是交换.pins的代码

var dragged = $(ui.draggable);
var fromContainer = dragged.parent();
var toContainer = $(this);
var displaced = $(this).find('.pins');

// added class .from and .to classes to identify the placeholders
var fromPinContainer = dragged.find('.pins').removeClass('from to');
fromPinContainer.addClass("from");

displaced.removeClass('from to');
displaced.addClass("to");

if (fromContainer.is(toContainer)) {
    dragged.animate({ left: 0, top: 0 });
}

dragged.animate({ top: 0, left: 0 });
displaced.animate({ bottom: 0, left: 0 }, finalize);

function finalize() {
   fromContainer.find('.draggable').append(toContainer.find('.to'));
   toContainer.find('.draggable').append(dragged.find('.from'));
}

finalize();

JSFiddle

我想这不是完美的代码，但它提供了您正在寻找的效果。

Jquery 可拖动项目的动画问题

Jquery Animate Issue with Draggable Item

jquery

animation

jquery-animate