dnd-kitとは？Accessible Drag & Drop Toolkit

ページ内ナビ

概要

dnd-kitはlist、grid、multiple container、nested context、virtualized list等のdrag-and-drop UIを構築するtoolkitです。framework-agnostic coreとDOM layerの上にReact/Vue/Svelte/Solid adapterを持ち、sensor、collision detection、animation、keyboard操作、ARIA/live region等を拡張できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

draggable・droppableとDragDropProviderでdrag lifecycleを構成する

React adapterはDragDropProvider、useDraggable、useDroppable等を提供し、drag start/move/over/endのstateとevent handlingをcomponent treeへ統合できます。

出典：[1][3]

pointer・mouse・touch・keyboard sensorを用途に合わせて組み合わせる

READMEはmultiple input methodをbuilt-in featureとして挙げ、React packageはDOM layer由来のKeyboardSensor/PointerSensorを公開します。入力方式ごとのbehaviorをcustomizeできます。

出典：[1][3]

sortable・collision detection・virtualized list等へ拡張する

core layerからsortable supportやcollision detectionを組み合わせ、list/grid、nested context、variable size、virtualized list等へ適用できます。

出典：[1][2]

向いている用途

drag-and-drop behaviorをdesign systemや複雑なeditor UIで共通化したい場合に向く

kanban、並べ替えlist、dashboard builder、editor等でinput/accessibility/collision handlingを個別実装せず、shared primitiveとして扱いたいfrontend architectureに適します。

出典：[1]

導入前の確認

React adapter 0.5.0はReact/React DOM 18または19を要求する

@dnd-kit/react 0.5.0のpackage metadataはReact/React DOM ^18.0.0 || ^19.0.0をpeer dependencyとして定義します。

出典：[2]

0.5.0ではdisabled指定とinline sensorsの再設定問題が修正・拡張された

0.5.0はsortableのdrag/dropを個別disableできるobject形式を追加し、inline arrayで渡したsensorsがrenderごとに再設定される問題を修正しています。

出典：[4]

参考にした公式資料

[1]dnd-kit React 0.5.0 README(2026-10-05)
[2]@dnd-kit/react 0.5.0 package metadata(2026-10-05)
[3]@dnd-kit/react core exports(2026-10-05)
[4]@dnd-kit/react 0.5.0 release(2026-10-05)
[5]dnd-kit MIT license(2026-10-05)

編集部からの補足

現行dnd-kitはframework-agnostic core + DOM layer + framework adapterの構成です。古い記事にある@dnd-kit/core中心のAPIと混同せず、採用versionのdocumentationを確認してください。

3ステップで試す

1
dnd-kit React 0.5.0を固定して導入する
一時npm projectへReact adapterとpeer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/dnd-kit.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @dnd-kit/react@0.5.0 react@19.2.0 react-dom@19.2.0
2
package versionを確認する
review対象のReact adapter versionが導入されていることを確認します。
test "$(node -e "console.log(JSON.parse(require('fs').readFileSync('node_modules/@dnd-kit/react/package.json')).version)")" = '0.5.0'
3
drag-and-drop API exportを確認する
browser inputを発生させず、React adapterの主要provider/hookがexportされていることを確認します。
test "$(node --input-type=module -e "import * as D from '@dnd-kit/react'; console.log(['DragDropProvider','useDraggable','useDroppable'].every(k=>k in D))")" = 'true'

公式READMEで確認

成長

成長の推移 · 直近30日

17,693 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 9
Open PR: 44

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

react
draggable
droppable
sortable
drag-and-drop
drag

Stars: 17,693
Forks: 920
Watchers: 41
Open Issues: 89
Contributors: 65
所有者種別: User
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/09/12