ドラッグアンドドロップ
Drag and drop
別名: ドラッグ&ドロップ、D&D、DnD、Drag and drop
生態（さわってみる）
ドラッグ、またはキーボードで「項目を選択（Enter/Space）→↑↓キーで移動→再度Enterで確定」の操作で並び替えられます。
- 項目A：要件定義
- 項目B：設計
- 項目C：実装
- 項目D：テスト
- 項目E：リリース
一言定義
要素を掴んで移動し、別の位置や領域に離すことで並び替え・移動・投入を行う汎用的な操作パターン。
分類
使う場面
- リストやカードの並び順を、視覚的な操作で直感的に変更させたいとき
- カンバンボードのように、要素を別の領域（列）へ移動させる操作を主手段としたいとき
避ける場面
- アップロード専用の受け皿が必要なだけのとき（→ドロップゾーン、より特化した用途）
- ドラッグ操作に不慣れなユーザーやキーボード・スクリーンリーダー利用者を主要な利用者に含むとき（キーボード代替の実装コストを常に見込む）
近縁種との比較
ドラッグアンドドロップは要素の並び替え・移動全般を指す最も汎用的な操作パターンで、カンバンボードやドロップゾーンはこの汎用パターンを特定用途に特化させた具体例として位置づけられる。カンバンボードは「状態」という1つの軸に沿ってタスクカードを列間で移動させる用途に特化し、ドロップゾーンはファイルをドロップしてアップロードする用途に特化する。汎用のドラッグアンドドロップ自体を単体のUIとして扱う場面としては、単純なリストの並び替え（優先順位の入れ替え等）が代表例になる。いずれの特化形であっても、ドラッグ操作だけを唯一の手段にするとキーボード・スクリーンリーダー利用者が操作できなくなるため、選択→移動先指定→確定という代替経路を必ず用意する点は共通する。
実例リンク
アクセシビリティ
- role
- 並び替え対象のリストはlist/listitemとしてマークアップする。HTML5 Drag and Drop APIはマウス操作前提でスクリーンリーダーからは扱えないため、キーボード代替を必ず実装する
- キーボード操作
- 項目をEnter/Spaceで「選択」状態にし、↑↓キーで移動先を選び、再度Enterで確定する操作系を用意する。移動結果はaria-live領域で「〇〇を3番目に移動しました」のように通知する
- 補足
- 「ドラッグできる」ことは完成の条件ではない。視覚的なドラッグ操作はあくまで手段の一つであり、キーボードのみでも同じ結果に到達できることが必須要件（本図鑑のデモも選択→矢印キー→確定の代替を実装している）