React Hooksのみでドラッグ＆ドロップの並び替えを実装する

BRANK

この記事について上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います💪React Hooksについて基礎的な理解がある事を前提に解説していきます。実装する条件この記事で実装する処理は以下の条件のもと実装してきます。サードパーティ製のライブラリを使用しないReact Hooksを使って実装する並び替えするときにアニメーションさせる簡単に扱えるようにする！アニメーションはCSSを使って行いますが、今回は簡略化の為にCSSファイルは扱わずにインラインCSSを用いる事とします。どのように使えるか考えるこの節は読み飛ばしても問題ありません。すぐに実装が見たいという人は、「 並び替える要素を用意する 」から読み始めるか、完成品を既にCodeSandBoxに投稿してありますので、そちらを確認してください🤹‍♀️では早速、「 実装していくぞー💪 」と行きたい所ですが、今回のような凡庸的な処理を自作する時は、「 どういう感じで使いたいか？ 」という所から考えた方が色々とやりやすいと思っています。なので、今回はそこから考…