ドラッグ & ドロップ
読み: どらっぐあんどどろっぷ
ファイルをマウスで掴んでブラウザの指定領域に落とすことで、ファイル選択ダイアログを経由せずに画像を読み込む UI パターン。
ドラッグ & ドロップ (Drag and Drop) は、デスクトップやファイルマネージャーからファイルを直接 Web アプリケーションに投入する操作方式である。HTML5 の Drag and Drop API と File API を組み合わせることで、ユーザーがファイル選択ダイアログを開かずに直感的に画像を読み込める。
実装では dragover、dragleave、drop イベントをリッスンし、event.dataTransfer.files から File オブジェクトを取得する。ドロップゾーンのハイライト表示やファイル種別のバリデーション (画像以外を拒否) を組み合わせることで、ユーザーに明確なフィードバックを提供する。
一括処理ツールでは複数ファイルの同時ドロップに対応し、フォルダごとドロップできる実装もある。画像圧縮ツールをはじめとする当サイトの全ツールがドラッグ & ドロップによるファイル入力をサポートしている。