FLIP手法でクリックした要素と先頭を入れ替えるUIを作る

FLIP手法というものを使って、表題の要件を実現してみました。

参考にさせていただいたのは、下記です。
www.dkrk-blog.net

手順を書くと、
1. 並べ替え前の位置を取得
2. 要素をinsertBeforeで入れ直し、並べ替え後の位置に配置
3. 並べ替え後の位置を取得
4. 1と3の差分をアニメーションさせる

という感じです。

初めてこの手法を試してみましたが、二つの並べ替え程度であればかなりライトに書けたので、ライブラリとか必要なさそうですね。