複数のアイテムでアクセス可能なドラッグアンドドロップ

この記事では、複数の要素処理とキーボードアクセシビリティのHTML5ドラッグアンドドロップ機能の強化を示しており、目撃者とスクリーンリーダーの両方のユーザーに利益をもたらします。 ドラッグアンドドロップAPI（初心者向けの入門記事を参照）に基づいていると仮定すると、その機能の拡張に焦点を当てます。

複数の要素のコアデータ操作は簡単ですが（

の代わりに個別の配列を使用）、ユーザーインターフェイスの複雑さは大幅に増加します。 ネイティブのドラッグアンドドロップには後者が欠けているため、事前選択メカニズムとキーボードサポートに対処します。 注：タッチイベントとブラウザポリフィルは、この記事の範囲外です。 ソリューションは、Windowsを横切るのではなく、単一ページ内で作品を提示しました。

dataTransfer重要な改善：

複数のアイテムの選択とキーボードナビゲーションのためのhtml5のドラッグアンドドロップの拡張、アクセシビリティの向上。 アレイは、ドラッグ中に複数の要素を追跡し、IDが静的でない動的環境（CMSシステムなど）への統合を簡素化します。 キーボードのアクセシビリティは、ARIA属性（

、

）および標準キーストローク（選択用のスペース、ドロップ用のコントロールM/コマンドM）を使用して実装されます。
• 単純化されたインターフェイスは、連続した選択を回避し、すべての修飾子キーを非連続選択のために均等に扱います。
動的ARIA属性の更新では、シームレスなクロスモーダル（マウス/キーボード）インタラクションを確保します
• 堅牢なクロスブラウザー互換性は、コマンドキーを押した状態でMac/webkitで発射しないドロップイベントなどの問題に対処します（ドロップファイナライズに
を使用）。
• aria-grabbedaria-dropeffect基本的なドラッグアンドドロップ（簡略化された例）：
機能的な例は、マウスの相互作用を使用して単一の要素の基本的なドラッグアンドドロップを示しています。 このコードは、要素IDの
• に依存し、プロセスを簡素化し、サーバー側のアプリケーションへの適応性を向上させる代わりに、アイテムの参照を維持します。 一貫性のないブラウザのサポートのため、
および
• は省略されています。 Draggable属性は、JavaScriptを介して動的に適用され、懸念を分離し、壊れた実装（古いオペラバージョンなど）を除外できます。 HTMLは、識別にdragend属性を使用します。

アクセス可能なドラッグアンドドロップの実装：

アクセシビリティが最重要です。 ドラッグアンドドロップに関するARIAオーサリングプラクティスガイドラインを遵守します：

1. ドラッグ可能な要素はaria-grabbed="false"を使用し、キーボードに夢中です。
2. SpaceBarは要素を選択します。 aria-grabbedは選択時に「真」になります。
3. コントロールM/コマンドMは選択を完成させます（最初のドロップターゲットのショートカット）。
ターゲット要素は、許可されたアクションを示すために
4. を使用します aria-dropeffectm/command mを制御するか、ターゲット要素でドロップアクションを実行します。
5. 脱出は操作をキャンセルします。
6. アクション後のクリーンアップリセット
および
7. 。aria-dropeffect aria-grabbed
これらの推奨事項を強化します。選択終了キーストロークはオプションであり、コントロールM/コマンドMはドロップのためにENTERで補完されます。 簡単にするために、すべての修飾子キー（Shift、Control、Command）を有効にしてください。

複数の選択（マウスとキーボード）：

コードは、ドラッグ可能な要素におよび

属性を追加します。マウスの選択では、

（シングル/リセット）およびaria-grabbed（削除/複数）を使用します。 キーボードの選択では、選択のためにSpaceBarを使用し、複数の選択の修飾子を処理します。 tabindexプロパティは、選択が単一の容器に限定されることを保証します。 mousedown、mouseup、およびkeydown関数は、選択状態を管理します selections.owneraddSelection選択のドラッグ（マウスとキーボード）：removeSelection clearSelections

は、有効なドロップターゲットを示すために使用されます。 キーボードインタラクションは、選択時にを追加します。 マウスの相互作用の場合、および

イベントは、イベントのバブルを処理するために

変数とaria-dropeffect関数を使用して、ホバー状態を管理します。 キーボードナビゲーションを改善するために、ターゲットコンテナ内のアイテムから削除されます。 aria-dropeffect="move"dragenter選択のドロップ（マウスとキーボード）：dragleaverelated getContainertabindexイベント（マウス）ドロップとリセットを処理します。 ブラウザの矛盾のため、

イベントは省略されています。 キーボードインタラクションでは、ターゲットコンテナの

イベントを使用してドロップを処理し、リセットの問題を回避するためのフォーカスを管理します。 さらなる機能強化：

dragend将来の改善には、タッチ/ポインターイベントサポート、ブラウザポリフィル、選択のソート、カスタマイズ可能なコピー/移動アクション、連続的な選択、カスタムドラッグゴースト、ドラッグ中の視覚的なキューが含まれます。 コードはgithub（元のテキストで提供されるリンク）で入手できます。drop keydown

faqs：

FAQSセクションでは、アクセス可能なドラッグアンドドロップ実装に関する一般的な質問に対する明確で簡潔な回答を提供し、複数の要素、滴下領域、注文制御、エラー処理、およびテストをカバーしています。

以上が複数のアイテムでアクセス可能なドラッグアンドドロップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。