Drag and Drop
ドラッグ＆ドロップ（ファイル入力方式）
デスクトップやファイルマネージャーからファイルを選択してWebアプリケーションのドロップゾーンに直接ドラッグすることで、従来のファイル選択ダイアログの直感的な代替手段を提供するユーザーインタラクションパターンです。
技術的詳細
HTML5 Drag and Drop APIはターゲット要素上のdragenter、dragover、dragleave、dropイベントを使用します。dropイベントのdataTransfer.filesプロパティがドロップされたファイルのFileListを提供します。ディレクトリの場合、DataTransferItem.webkitGetAsEntry()メソッドがFile and Directory Entries APIを通じた再帰的な読み取りを可能にします。dragover時のCSSによる視覚的フィードバック（ボーダーのハイライト、オーバーレイメッセージ）はユーザビリティに不可欠です。このAPIはアクセシビリティのためにフォールバックと併用されます。
例
```javascript
// Drag and drop file handler
dropZone.addEventListener('drop', async (e) => {
e.preventDefault();
const files = Array.from(e.dataTransfer.files);
for (const file of files) {
console.log(`${file.name}: ${(file.size/1024).toFixed(1)} KB`);
const data = await file.arrayBuffer();
processFile(data);
}
});
```