React でドラッグ&ドロップ(DnD)を実装する方法の調査

React でドラッグ&ドロップ(DnD)を実装する方法の調査

[ 要件 ]

1. ドラッグ&ドロップで並び順を変更できるようにする。
2. Project の使用技術は、Next.js, React, TypeScript

dnd kit という DnD ライブラリを発見。

dnd-kit の特徴

1. 機能が豊富

   • カスタマイズ可能な衝突検知アルゴリズム、複数のアクティベーター、ドラッグ可能オーバーレイ、ドラッグハンドラー等の多くの機能を提供しています

2. React製

   • 提供されている2つのhooks、 useDraggable と useDroppable を使えば、DOM のラッパーを作成することなくすぐに DnD が実装できます

3. 外部依存もなくて軽量

   • コアは 10KB ほどに最小化されていて、他の外部ライブラリには依存していません

4. プリセットがある

   • ソートが必要な場合は、@dnd-kit/sortable を使ってみてと書いてあります

dnd kitを導入する

npm install @dnd-kit/core

# または、、、

yarn add @dnd-kit/core

【 参考・引用 】

https://zenn.dev/hamo/articles/725e4189bfc54d

https://dndkit.com/

React ✖️ DnD のさらなる情報調査

https://zenn.dev/aldagram_tech/articles/c2cf248bd016fc

https://qiita.com/taka-k/items/58c8ce580f47d3526d9c

https://cpoint-lab.co.jp/article/202105/20024/

https://qiita.com/taka-k/items/f1d0f1c082437d439df4

https://www.gaji.jp/blog/2022/03/10/9281/

dnd-kitでかんばん Boardを実装するSample

Next.jsでTrello風タスク管理アプリを作成

https://qiita.com/naitoyuma/items/8261d3da9b9b9c4312f2

https://codesandbox.io/s/dnd-kit-kanban-board-1df69n?file=/src/App.tsx

react-dnd-kit-tailwind-shadcn-ui Example

https://github.com/Georgegriff/react-dnd-kit-tailwind-shadcn-ui

https://georgegriff.github.io/react-dnd-kit-tailwind-shadcn-ui/

react-kanban-board-dnd-kit-tutorial-yt

https://github.com/Kliton/react-kanban-board-dnd-kit-tutorial-yt/tree/main

https://react-kanban-board-dnd-kit-tutorial-yt.vercel.app/

https://www.youtube.com/watch?v=RG-3R6Pu_Ik