dnd kit
@dnd-kit
useDraggableやuseDroppableなどのフックを公開します。アプリを再構築したり、追加のラッパー DOM ノードを作成したりする必要はありません。@dnd-kit/sortableを確認してください。これは@dnd-kit/coreの上に構築された薄い層です。将来的にはさらに多くのプリセットが追加される予定です。 dnd kitの使用を開始する方法については、公式ドキュメント Web サイトにアクセスしてください。ドラッグ アンド ドロップ インターフェイスの構築に役立つ詳細な API ドキュメント、ヒント、ガイドが見つかります。
dnd キットのコア ライブラリは、次の 2 つの主要な概念を公開します。
useDraggableフックとuseDroppableフックを使用して既存のコンポーネントを拡張するか、両方を組み合わせてドラッグ アンド ドロップできるコンポーネントを作成します。
<DndContext>プロバイダーを使用して、イベントを処理し、ドラッグ可能な要素とドロップ可能な領域の動作をカスタマイズします。さまざまな入力方法を処理するようにセンサーを構成します。
<DragOverlay>コンポーネントを使用して、通常のドキュメント フローから削除され、ビューポートを基準にして配置されるドラッグ可能なオーバーレイをレンダリングします。
開始方法については、クイック スタート ガイドをご覧ください。
拡張性はdnd kitの中核です。無駄がなく、拡張可能なように構築されています。これには、ほとんどの人がほとんどの場合に必要とすると思われる機能が付属しており、 @dnd-kit/coreの上に残りの部分を構築するための拡張ポイントを提供します。
dnd キットの拡張性レベルの主な例は、 @dnd-kit/coreによって公開される拡張ポイントを使用して構築される Sortable プリセットです。
dnd キットの主な拡張ポイントは次のとおりです。
アクセス可能なドラッグ アンド ドロップ インターフェイスを構築するのは困難です。 dnd キットには、ドラッグ アンド ドロップ インターフェイスをアクセスしやすくするための、賢明なデフォルトと開始点が多数あります。
aria属性の適切なデフォルトスクリーン リーダーにより良いエクスペリエンスを提供する方法について詳しくは、アクセシビリティ ガイドをご覧ください。
ほとんどのドラッグ アンド ドロップ ライブラリとは異なり、 dnd キットは意図的に HTML5 ドラッグ アンド ドロップ API の上に構築されていません。これはアーキテクチャ上の意図的な決定であり、使用を決定する前に注意しておく必要があるトレードオフが伴いますが、ほとんどのアプリケーションではメリットがトレードオフを上回ると私たちは考えています。
HTML5 ドラッグ アンド ドロップ API には、いくつかの重大な制限があります。タッチ デバイスやキーボードを使用した項目のドラッグはサポートされていません。つまり、その上に構築されるライブラリは、これらの入力メソッドをサポートするためにまったく異なる実装を公開する必要があります。また、特定の軸やコンテナの境界へのドラッグのロック、カスタム衝突検出戦略、さらにはドラッグされたアイテムのプレビューのカスタマイズなどの一般的なユースケースもサポートしていません。
これらの問題の一部には回避策がありますが、これらの回避策は通常、コードベースの複雑さとライブラリのバンドル全体のサイズを増大させ、マウス、タッチ、キーボードの各レイヤー間で不整合が発生します。これは、これらのレイヤーがまったく異なる実装を利用しているためです。
HTML5 ドラッグ アンド ドロップ API を使用しない場合の主なトレードオフは、デスクトップまたはウィンドウ間でドラッグできないことです。念頭に置いているドラッグ アンド ドロップのユースケースにこの種の機能が含まれる場合は、HTML 5 ドラッグ アンド ドロップ API 上に構築されたライブラリを使用することをお勧めします。ネイティブ HTML 5 ドラッグ アンド ドロップ バックエンドを備えた React ライブラリについては、react-dnd をチェックアウトすることを強くお勧めします。
dnd キットを使用すると、項目の位置を移動する必要があるたびに DOM を変更することなく、ドラッグ アンド ドロップ インターフェイスを構築できます。
これが可能になるのは、ドラッグ操作の開始時に、 dnd kit がドロップ可能なコンテナーの初期位置とレイアウトを遅延計算して保存するためです。これらの位置はuseDraggableとuseDroppable使用するコンポーネントに渡されるため、ドラッグ操作の進行中に項目の新しい位置を計算し、再描画をトリガーしないパフォーマンスの高い CSS プロパティを使用して項目を新しい位置に移動できます。 translate3dとscale 。これを実現する方法の例については、 @dnd-kit/sortableライブラリによって公開されている並べ替え戦略の実装を確認してください。
これは、ドラッグ中に DOM 内の項目の位置を移動できないということではありません。これはサポートされており、場合によっては避けられないことです。場合によっては、DOM 内で項目を移動するまで、項目の新しい位置とレイアウトを事前に知ることができない場合があります。ドラッグ中の DOM へのこの種の変更はコストがはるかに高く、再描画が発生するため、可能であれば、 translate3dとscale使用して新しい位置を計算することを推奨します。
また、 dnd キットは、すべてのセンサーのアクティベーター イベントに SyntheticEvent リスナーを使用します。これにより、個々のドラッグ可能なノードにイベント リスナーを手動で追加するよりもパフォーマンスが向上します。
@dnd-kitリポジトリでの作業@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilitiesすべての依存関係をルート ディレクトリにインストールする必要があります。 @dnd-kit Lerna および Yarn ワークスペースを使用するモノリポジトリであるため、npm CLI はサポートされていません (yarn のみ)。
yarn installこれにより、各プロジェクトにすべての依存関係がインストールされ、ビルドされ、Lerna 経由でシンボリックリンクされます。
1 つの端末で、 yarn startを並行して実行します。
yarn startこれにより、各パッケージが<packages>/<package>/distにビルドされ、プロジェクトが監視モードで実行されるため、 <packages>/<package>/src内に保存した編集により<packages>/<package>/distへのリビルドが行われます。結果は端末にストリーミングされます。
yarn start:storybookストーリーブックを実行します http://localhost:6006 を開いてブラウザーで表示します。
Parcel を利用したプレイグラウンドでローカル パッケージを使用して遊ぶことができます。
yarn start:playgroundこれによりlocalhost:1234でプレイグラウンドが開始されます。 1 つのターミナルで lerna をパラレル モードでウォッチを実行し、その後 Parcel を実行すると、ソースがpackages/*/src/*内にあるインポートされたモジュールに変更を加えると、プレイグラウンドがホット リロードされます。これを実現するために、各パッケージのstartコマンドは TDSX に--noCleanフラグを渡すことに注意してください。これにより、ファイルが見つからないエラーが原因で再構築の間にパーセルが爆発するのを防ぎます。
安全に関する重要なヒント: プレイグラウンドでパッケージを追加/変更する場合は、package.json でaliasオブジェクトを使用します。これにより、NPM からパッケージをインストールしようとするのではなく、ファイル システムに解決するよう Parcel に指示します。また、発生する可能性のある重複した React エラーも修正されます。
(3 番目のターミナルで) Cypress を実行すると、ストーリーブックに対して統合テストが実行されます。
