Zenn
Closed2

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/

このスクラップは2023/08/23にクローズされました