ドラッグアンドドロップ

Drag and drop

要素を掴んで移動し、別の位置や領域に離すことで並び替え・移動・投入を行う汎用的な操作パターン。

ドラッグ、またはキーボードで「項目を選択(Enter/Space)→↑↓キーで移動→再度Enterで確定」の操作で並び替えられます。

  1. 項目A:要件定義
  2. 項目B:設計
  3. 項目C:実装
  4. 項目D:テスト
  5. 項目E:リリース

○ 使う場面

  • リストやカードの並び順を、視覚的な操作で直感的に変更させたいとき
  • カンバンボードのように、要素を別の領域(列)へ移動させる操作を主手段としたいとき

× 避ける場面

  • アップロード専用の受け皿が必要なだけのとき(→ドロップゾーン、より特化した用途)
  • ドラッグ操作に不慣れなユーザーやキーボード・スクリーンリーダー利用者を主要な利用者に含むとき(キーボード代替の実装コストを常に見込む)

別名

ドラッグ&ドロップ

近縁種との比較

汎用のドラッグアンドドロップ自体を単体のUIとして扱う場面としては、単純なリストの並び替え(優先順位の入れ替え等)が代表例になる。「つかむ(ドラッグ)」「はなす(ドロップ)」という指先の動作をそのまま名前にした操作パターンで、グラフィカルなデスクトップ環境の登場とともに広まったとされる。

近縁種違い・使い分け
カンバンボードカンバンボードは「状態」という1つの軸に沿ってタスクカードを列間で移動させる用途にドラッグアンドドロップを特化させた具体例である。
ドロップゾーンドロップゾーンはファイルをドロップしてアップロードする用途にドラッグアンドドロップを特化させた具体例である。

分類

機能・役割
  • ナビゲーション
  • 入力・操作
  • 表示・整理
  • フィードバック・状態
表示レイヤー
  • インライン
  • 固定・追従
  • オーバーレイ
  • 全画面・遷移
複雑さ
  • 単体パーツ
  • 複合パーツ
  • セクション