ドラックアンドドロップで要素を作成したり、並べ替えたり

はじめに ファイルのアップロードの時しかり、TODO リストの並べ替えしかり、ドラック・ドロップする機会はそれなりにあります。 しかし、いざ自分が実装するとなるとどうして良いか分かりませんでした。 とはいえ、ここ直近でドラック・ドロップ機能を実装する必要が出てきたため調査していたら、dnd kitといういい感じのモジュールがありました。 なので、今回はこのdnd kitの使い方を見ていき、活用編としてドラック・ドロップで要素が生成できるようにするコンポーネントを作っていきます。 結構長いですが、是非お付き合いください。 この記事のここだけ!!! ドラック・ドロップ機能はdnd kitで実装しています。 この機能はドラック・ドロップ機能に加え、並べ替え機能もあります。 以上の機能を活かして、ドラック・ドロップしたらコンポーネントを動的に生成できます。 生成した要素の並べ替えもできます。 完成