Reactのドラッグ＆ドロップライブラリ、dnd kitの使い方をユースケースから理解する

こんにちは！株式会社 CastingONEの岡本です。 はじめに 弊社のアプリケーションのフロントは現在、Nuxt2 から React(Next.js)にリプレイスを行なっています。移行するにたり、ドラッグ＆ドロップのライブラリを探していたところdnd kitが良さそうということになったので、このライブラリを深く理解するため、社内で勉強会を開催を実施しました。今回は、その勉強会で使用したサンプルを基に、dnd kit の使い方について解説していきます！ dnd kit とは dnd kit は、React のための軽量かつ拡張可能なドラッグ&ドロップのツールキットです。主な特徴は以下の通りです。 豊富な機能 カスタマイズ可能な衝突検出アルゴリズム、複数のアクティベータ、ドラッグ可能なオーバーレイ、ドラッグハンドル、自動スクロール、制約などが含まれる React 専用 useDraggabl