Awesome

<p align="center"> <img src="https://user-images.githubusercontent.com/2182637/53611918-54c1ff80-3c24-11e9-9917-66ac3cef513d.png" alt="react beautiful dnd logo" /> </p> <h1 align="center">react-beautiful-dnd <small><sup>(rbd)</sup></small></h1> <div align="center">

React を使用した美しくて誰でも使いやすいドラッグ・アンド・ドロップリスト

quote application example

必要に応じて、この例を試してください！

</div>

主要な特徴

美しく、かつアイテムが自然に動く💐
誰でも使い易い: 強力なキーボードとスクリーンリーダーのサポート♿️
超ハイパフォーマンス 🚀
使い始めるのが簡単なクリーンで強力な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 が適切でない場合があります。