javascript - 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ライブラリを介してアイテムを「宛先」ボックスにドラッグアンドドロップできるようにします。したがって、私はこのjavascriptスニペットを使用します。

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

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

結果に関する限り、これは完全に機能しますが、「元に戻す」を処理するアニメーションは、私が望むように動作しません。問題は、ドラッグが明らかに「position：relative」を設定してから「top」および「left」cssプロパティを変更することによって実装されることです。アイテムが新しいコンテナにアタッチされると（復帰アニメーションの前に発生します）、新しいコンテナに対して相対的に配置されるため、アイテムは新しい位置にジャンプします。これで、復帰アニメーションが新しい位置から開始されます。

アイテムを新しいコンテナにアタッチした後、スムーズに元に戻すアニメーションを作成する方法はありますか？おそらく私はこれを完全に間違った方法で行っているので、別のアプローチを提案することを躊躇しないでください。

新しいコンテナの絶対位置に基づいてcssの左と上のプロパティを再計算しようとしていますが、これはもちろん最初にドロップされたアイテムに対してのみ機能し、2番目のアイテムは最初のアイテムの位置を追加で考慮する必要があります。

ありがとう。