JQueryUI：放入容器内、追加和恢复

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);
  }
});

虽然就结果而言这工作得很好，但处理“恢复”的动画并没有按照我想要的方式运行。问题在于，拖动显然是通过设置“position：relative”然后更改“top”和“left”CSS属性来实现的。一旦该项目附加到新容器（这发生在恢复动画之前），它就会跳转到新位置，因为它现在相对于新容器定位。恢复动画现在从新位置开始。

将项目附加到新容器后，有什么方法可以实现平滑的恢复动画吗？也许我的处理方式完全错误，所以请毫不犹豫地提出任何不同的方法。

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

谢谢。