javascript - jQuery UI draggable 在放下时有不稳定的过渡

Question

我有一个简单的拖放功能，我正试图让它发挥作用。我有可拖动的卡片，可以放在其他卡片上以与另一张卡片交换位置。这是一个具有适当功能的 fiddle :https://jsfiddle.net/vj0a9gp8/1/

拖放代码非常简单:

$(function() {
  $(".card").  draggable({
    revert: true
  }).  droppable({
    hoverClass: "card-hover",
    drop: function(event, ui) {
      swapNodes($(this).get(0), $(ui.draggable).get(0));
    }
  });
});


function swapNodes(a, b) {
  var aparent = a.parentNode;
  var asibling = a.nextSibling === b ? a : a.nextSibling;
  b.parentNode.insertBefore(a, b);
  aparent.insertBefore(b, asibling);
}

基本上，当一张卡片被拖动然后放到另一张卡片上时，swapNodes 函数向上遍历 dom 并将它们放在它们所属的位置。这一切都很好。您可以在 fiddle 中看到的问题是，当掉落发生时，掉落的卡片会在动画到位之前从屏幕上跳下来，整体看起来很差。我试过使用 draggable.position 来解决和修复这个功能，但我所做的只是让它变得更糟。有什么想法吗？

Answer 1

当您拖动元素时，它会改变左侧和顶部的位置。当你放下它时，你改变了它在 DOM 中的位置，但你从未指定一个新的顶部和左侧，所以它在拖动它时仍然保持原来的设置。动画在那里是因为你有一个 revert to true，它会放回原始位置并为其设置动画。

简单的解决方案是将 revert 设置为“无效”(因此只有在没有掉落的情况下)并在交换函数中设置 left 和 top。像这样

revert: 'invalid'
...
b.style.left = '';
b.style.top = '';

https://jsfiddle.net/huw2Lkgb/1/