- 美しく、かつ アイテムが自然に動く💐
- 誰でも使い易い: 強力なキーボードとスクリーンリーダーのサポート♿️
- 超ハイパフォーマンス 🚀
- 使い始めるのが簡単なクリーンで強力なAPI
- 標準のブラウザ操作で非常にうまく機能
- かっちりしたスタイリング
- 追加のラッパー DOM ノードを作成する必要なし-フレックスボックスとフォーカス管理に適しています！
すぐに react-beautiful-dnd を始められるように、egghead.io 🥚上に無料のコース を用意しています。
- 垂直リスト↕
- 水平リスト↔
- リスト間の移動(▤ ↔ ▤)
- 仮想リストのサポート👾 - 10,000 個のアイテムを 60 fps で解除
- アイテムを組み合わせ
- マウス🐭、キーボード🎹♿️ そしてタッチスクリーン👉📱（モバイル、タブレット等）サポート
- マルチドラッグのサポート
- 信じられないほどのスクリーンリーダーのサポート♿️ - 箱から出してすぐの英語のスクリーンリーダーに素晴らしい体験を提供します📦。また、完全なカスタマイズ制御と国際化サポートを必要とする人に提供します💖
- 条件付きドラッグと条件付きドロップ
- 1 ページに複数の独立したリスト
- 柔軟なアイテムサイズ - ドラッグ可能なアイテムは、さまざまな高さ（垂直リスト）または幅（水平リスト）を持つことができます
- ドラッグ中にアイテムを追加および削除
- セマンティック
<table>の並べ替えとの互換性 - テーブルパターン - 自動スクロール - ドラッグ中に必要に応じてコンテナとウィンドウを自動的にスクロールします（キーボードを使用している場合でも🔥）
- カスタムドラッグハンドル - アイテムの一部だけでアイテム全体をドラッグできます
- ドラッグ中にドラッグアイテムを別の要素に移動できる（クローン、ポータル） -
<Draggable /> の親変更 - スクリプト化されたドラッグアンドドロップ体験を作成する🎮
- 拡張機能が任意の input タイプ 🕹をサポートできるようにします
- 🌲
@atlaskit/treeパッケージによるツリーのサポート <Droppable />リストは、スクロールコンテナ（スクロール可能な親なし）またはスクロールコンテナの子（スクロール可能な親なし）にすることができます。- 独立したネストされたリスト - リストは別のリストの子になることができますが、親リストから子リストにアイテムをドラッグすることはできません
- サーバーサイドレンダリング （SSR） 互換 - resetServerContext() を参照してください
- デフォルトではネストされたインタラクティブ要素とうまく連携します
react-beautiful-dnd は、誰でも使用できるリストの美しいドラッグアンドドロップを作成するために存在します - 見ることができない人でも。プロジェクトの歴史と動機の概要については、次の外部リソースをご覧ください：
React 内でドラッグアンドドロップの相互作用を可能にするライブラリはたくさんあります。これらの中で最も注目に値するのは、驚くべき react-dnd です。それは非常に一貫性のない html5 ドラッグアンドドロップ機能で特にうまく機能するドラッグアンドドロッププリミティブの素晴らしいセットを提供するという素晴らしい仕事をします。react-beautiful-dnd は、リスト用に特別に構築された高レベルの抽象化です（垂直、水平、リスト間の移動、ネストされたリストなど）。その機能のサブセット内で、react-beautiful-dnd は、強力で自然で美しいドラッグアンドドロップ体験を提供します。ただし、react-dnd が提供する幅広い機能は提供していません。したがって、ユースケースによっては、react-beautiful-dnd が適切でない場合があります。
誰かがドラッグを開始して制御できる方法
- マウスによるドラッグ🐭
- タッチ操作によるドラッグ👉📱
- キーボードによるドラッグ🎹♿️
- 独自センサーの作成 （任意の入力タイプとスクリプト化された体験を可能にします）
<DragDropContext />- ドラッグアンドドロップを有効にするアプリケーションの部分をラップする<Droppable />- ドロップ可能なエリア。<Draggable />を含む<Draggable />- ドラッグ可能なものresetServerContext()- サーバーサイドレンダリング （SSR） のユーティリティ
<DragDropContext />レスポンダー -onDragStart、onDragUpdate、onDragEnd及びonBeforeDragStart<Draggable />を組み合わせる- 一般的なセットアップの問題
innerRefの使用- 問題の検出とエラー回復の設定
draggableId及びdroppableIdのルール- ブラウザのフォーカス保持
- ドロップアニメーションのカスタマイズまたはスキップ
- 自動スクロール
- スクリーンリーダーの制御
- html5 の
doctypeの使用 TypeScript及びflow: 型の情報<svg>のドラッグ- 画像のちらつきを避ける
- 目に見えないプリセットスタイル
- スクロールコンテナを検出する方法
- DOM イベントの使用方法 -
react-beautiful-dnd上に構築する必要がある場合に便利 - ドラッグ中に
<Draggable />を追加 (11.x の動作) - _⚠️ 高度 - コンテンツセキュリティポリシーの設定
- 仮想リスト👾
- マルチドラッグ
- テーブル
<Draggable />の親変更 - クローン API または独自ポータルの使用
English（オリジナル）
한글/Korean
中文/Chinese
На русском/Russian
Português/Portuguese
Ελληνικά/Greek
日本語/Japanese
Alex Reardon @alexandereardon
Alex はもはやこのプロジェクトを個人的にメンテナンスしていません。他の素晴らしいメンテナがこのプロジェクトを進めています。
- Bogdan Chadkin @IAmTrySound