Jquery有可拖动项目的动画问题

我有一个jQuery脚本来交换可拖动项目的位置，但由于某些原因动画效果在交换过程中导致视觉问题。该脚本是codef0rmer的jsfiddle的变体，我已经做了一些更改以适应我的需求。我创建了一个jsfiddle来显示这个问题，目前我找到了来自swap函数的问题，并且已经注释掉了可用但没有生成动画的行。如果任何人都可以帮助我使交换正确动画，我会非常感激。您可以查看这里的jsfiddle：http://jsfiddle.net/AywmJ/161/Jquery有可拖动项目的动画问题

这是该问题源自功能（我相信）：

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

来源

2016-05-31 Tyharo

我更新了我的jQuery以及jsfiddle链接，但我仍遇到同样的问题。 – Tyharo

您可否详细说明_“交换过程中的视觉问题” - 确切地说交换引发了什么样的视觉问题？ –

当交换元素的位置时，拖动的引脚将从不正确的方向进行动画处理，以在交换过程中占据位置。如果您查看jsfiddle并尝试将某个引脚拖动到另一个引脚上，则可以在交换过程中看到问题。 – Tyharo

我不熟悉jQuery的动画，但我发现一些事情来解决交换问题。

当你拖动占位符（“与拖动类div标签”）的加入SYLE性能style="position: relative; z-index: auto; left: 151px; top: 22px;"与left: 151px; top: 22px，这意味着多远预留位置从左边和顶部属性的当前位置移动。

在当前的代码你是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

我想这不是打磨的代码，但它给你在找什么效果。

来源

2016-06-09 19:47:55

非常感谢Pavan，我非常感谢！ – Tyharo

Jquery有可拖动项目的动画问题

回答

相关问题