Question

我有一个简单的拖放功能，我试图开始工作。我有可以拖动的卡，可以放在其他卡的顶部以与另一张卡交换位置。这里有一个功能小提琴：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并将它们放在它们所属的位置。一切都很好。你可以在小提琴中看到的问题是，当发生掉线时，掉落的卡片会在动画放入屏幕之前从屏幕上抖动，整体看起来很糟糕。我已尝试使用draggable.position来解决和修复此功能，但我所做的就是让情况变得更糟。有什么想法吗？

Answer 1

拖动元素时，它会更改左侧和顶部位置。当你删除它时，你改变它在DOM中的位置，但是你从不指定一个新的顶部和左边，所以它在拖动它时仍然保持一个。动画就在那里，因为你有一个恢复为真的，它会放回原始位置并为其设置动画。

简单的解决方案是将恢复设置为'无效'（所以只有在没有掉线的情况下）并在交换功能中设置左侧和顶部。喜欢这个

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

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

jQuery UI draggable在drop

1 个答案: