Question

我遇到了JQueryUI。具体来说，我有以下html剪切：

<div class="from">
 <div class"item">Item 1</div>
 <div class"item">Item 2</div>
 <div class"item">Item 3</div>
</div>

<div class="to"></div>

现在我想通过JQueryUI库将项目拖放到“to”框上。因此，我使用此JavaScript代码段：

$('.item').draggable({
  revert: true
});

$('.to').droppable({
  drop: function(event, ui) {
    ui.draggable.appendTo(this);
  }
});

虽然就结果而言这是完美的，但处理'revert'的动画并不像我想要的那样。问题是拖动显然是通过设置“position：relative”然后改变“top”和“left”css属性来实现的。一旦项目附加到新容器（在恢复动画之前发生），它就会跳转到一个新位置，因为它现在相对于新容器定位。恢复动画现在从新位置开始。

将项目附加到新容器后，有什么方法可以获得平滑的还原动画吗？也许我完全以错误的方式解决这个问题，所以请毫不犹豫地提出任何不同的方法。

我一直在尝试根据新容器绝对位置重新计算css left和top属性，但这当然仅适用于第一个丢弃的项目，第二个还需要考虑第一个项目的位置。

感谢。

JQueryUI：放入容器内，追加并恢复

0 个答案: