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

複數(shù)の要素のコアデータ操作は簡単ですが（

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

dataTransfer重要な改善：

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

、

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

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

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

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

複數(shù)の選択（マウスとキーボード）：

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

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

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

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

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

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

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

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

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

faqs：

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

以上が複數(shù)のアイテムでアクセス可能なドラッグアンドドロップの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。