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-animation，但我发现很少有东西可以修复掉掉交换问题。

当你拖动占位符（＆＃34; div标签带有可拖动的类＆＃34;）时，它会添加带有 style="position: relative; z-index: auto; left: 151px; top: 22px;" 的syle属性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>

更改为（现在交换.pins）

<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 Animate问题

1 个答案: