【どらっぐあんどどろっぷ】

ドラッグ&ドロップ とは?

💡 画面上のモノを「掴んで」「置く」直感操作
📌 このページのポイント
ドラッグ&ドロップの3ステップ ① クリック(掴む) ファイル 🖱 マウスボタンを押す ② ドラッグ(移動) ファイル 押したまま移動 ③ ドロップ(離す) ドロップ先 ファイル ボタンを離す 活用例 ファイル移動 メール添付 タスク管理ボード
ドラッグ&ドロップ操作のイメージ
ひよこ ひよこ

ドラッグ&ドロップってどうやるの?

ペンギン先生 ペンギン先生

マウスのボタンを押したまま動かすのがドラッグで、目的の場所でボタンを離すのがドロップだよ。この2つを合わせてドラッグ&ドロップと呼ぶんだね

ひよこ ひよこ

どんなときに使う操作なの?

ペンギン先生 ペンギン先生

ファイルをフォルダに移動したり、デスクトップのアイコンを並び替えたりするときに使うよ。メールに添付ファイルを追加するときにも便利だね

ひよこ ひよこ

スマホでもドラッグ&ドロップはできるの?

ペンギン先生 ペンギン先生

できるよ。ホーム画面でアプリアイコンを長押ししてから動かすのがまさにドラッグ&ドロップだね。指で掴んで移動させるイメージだよ

ひよこ ひよこ

Webサイトにドラッグ&ドロップでファイルをアップロードできるのは何で?

ペンギン先生 ペンギン先生

HTML5のDrag and Drop APIFile APIのおかげだよ。開発者がこれらのAPIを使って「ファイルをドロップしたらアップロード処理を始める」というコードを書いているんだ

ひよこ ひよこ

プログラミングの世界でもドラッグ&ドロップって使われるの?

ペンギン先生 ペンギン先生

ノーコード・ローコード開発ツールではドラッグ&ドロップで画面を組み立てられるものが多いよ。FigmaやCanvaのようなデザインツールでも中心的な操作だね。実はブラウザDevToolsでもDOM要素をドラッグして並び替えられるから、意外とエンジニアも日常的に使っている操作なんだよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「ドラッグ&ドロップ」って出てきたら「マウスで掴んで移動させる操作のことだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「Drag and Drop」 = 引きずって落とす
💬 Dragは「引きずる」、Dropは「落とす」という意味で、マウスで対象物を掴んで運び、離す一連の動作を表す
← 用語集にもどる