clauderic/dnd-kit

これは何？

主な機能

• 01フレームワーク非依存のコアと、React、Vue、Svelte、SolidJS向けアダプター
• 02ポインター、マウス、タッチ、キーボードのセンサーを標準搭載
• 03リスト、グリッド、複数コンテナ、仮想化リストに対応
• 04センサー、衝突判定、キー割り当てをカスタマイズ可能
• 05並べ替え可能なリスト向けに、コアをベースとしたsortableレイヤーを提供
• 06アクセシビリティのためのキーボード操作とデフォルトのARIA属性

ユースケース

• ReactやVueのアプリで、並べ替え可能なリストやカンバン形式のボードを構築する
• 複数コンテナを使ったドラッグ＆ドロップ対応のグリッドやレイアウトを作成する
• Webインターフェースに、タッチ操作とキーボード操作に対応した並べ替え機能を追加する

クイックスタート

1. 1

   フレームワークを選び、dndkit.com のクイックスタートガイドに従ってください

2. 2

   bun でモノレポの依存関係をインストールします

   bun install
3. 3

   開発モードを起動します

   bun run dev

トピック

よくある質問

dnd-kit とは？

Web向けのモダンで軽量なドラッグ＆ドロップツールキット。フレームワーク非依存のコアと、React、Vue、Svelte、SolidJS向けアダプターを備えています。 dnd-kitは、Web上でインタラクティブなUIを構築するためのドラッグ＆ドロップツールキットです。フレームワーク非依存のコア（@dnd-kit/abstract）、DOM実装（@dnd-kit/dom）、React、Vue、Svelte、SolidJS向けの薄いアダプターで構成されており、素のJavaScriptで使うこともできます。

dnd-kit は無料で使えますか？ライセンスは？

dnd-kit は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

dnd-kit は今もメンテナンスされていますか？

活発にメンテナンス中。dnd-kit の最終コミットは 2026年10月15日 です。

dnd-kit は何に使えますか？

ReactやVueのアプリで、並べ替え可能なリストやカンバン形式のボードを構築する 複数コンテナを使ったドラッグ＆ドロップ対応のグリッドやレイアウトを作成する Webインターフェースに、タッチ操作とキーボード操作に対応した並べ替え機能を追加する

dnd-kit のインストール方法は？

フレームワークを選び、dndkit.com のクイックスタートガイドに従ってください bun でモノレポの依存関係をインストールします: bun install 開発モードを起動します: bun run dev

dnd-kit はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/clauderic/dnd-kit