ファイルのドラッグ & ドロップ
HTML ドラッグ & ドロップインターフェイスは、ウェブアプリケーションでファイルをウェブページにドラッグ & ドロップできるようにするものです。この記事では、基礎となるプラットフォームのファイルマネージャーからドラッグされ、ウェブページにドロップされた 1 つまたは複数のファイルを、アプリケーションで受け入れる方法について記述しています。
ドラッグ & ドロップの主な手順は、ドロップゾーン（ファイルドロップの対象要素）を定義することと、drop およびdragover イベントのイベントハンドラーを定義することです。これらの手順は、コード例を含め、下記で記述します。完全なソースコードはMDN のドラッグ & ドロップリポジトリーで利用できます（プルリクエストや issue を歓迎します）。
なお、HTML ドラッグ & ドロップでは、ファイルのドラッグ & ドロップに対応するために 2 つの異なる形の API を定義しています。一方の API はDataTransfer インターフェイスで、もう一方の API はDataTransferItem とDataTransferItemList インターフェイスです。この例では、両方の API の使用方法を説明します （そして、Gecko 固有のインターフェイスは一切使用しません）。
ドロップゾーンの定義
drop イベントの対象となる要素には、ondrop イベントハンドラーが必要です。以下のコードでは、<div> 要素を使用してこの処理を行う方法を示しています。
<div ondrop="dropHandler(event);"> <p>Drag one or more files to this <i>drop zone</i>.</p></div>通常、アプリケーションでは、ドロップ対象の要素にdragover イベントハンドラーを記述し、そのハンドラーによって、ブラウザーの既定のドラッグ動作をオフにします。このハンドラーを追加するには、ondragover イベントハンドラーを記載する必要があります。
<div ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> <p>Drag one or more files to this <i>drop zone</i>.</p></div>最後に、アプリケーションはドロップ先の要素のスタイルを設定して、要素がドロップゾーンであることを視覚的に示したい場合があります。この例では、 drop ドロップ先の要素は以下のスタイル設定を使用します。
#drop_zone { border: 5px solid blue; width: 200px; height: 100px;}ドロップの処理
drop イベントは、ユーザーがファイルをドロップしたときに発行されます。以下のドロップハンドラーでは、ブラウザーがDataTransferItemList インターフェイスを使用している場合はgetAsFile() メソッドを使用して各ファイルにアクセスし、そうでない場合はDataTransfer インターフェイスのfiles プロパティを使用して各ファイルにアクセスしています。
この例では、ドラッグしたそれぞれのファイル名をコンソールに書き出す方法を説明します。実際のアプリケーションでは、File API を使用してファイルを処理したいかもしれません。
この例では、ファイルでないドラッグアイテムは無視されることに注意してください。
function dropHandler(ev) { console.log("File(s) dropped"); // 既定の動作で防ぐ（ファイルが開かれないようにする） ev.preventDefault(); if (ev.dataTransfer.items) { // DataTransferItemList インターフェイスを使用して、ファイルにアクセスする [...ev.dataTransfer.items].forEach((item, i) => { // ドロップしたものがファイルでない場合は拒否する if (item.kind === "file") { const file = item.getAsFile(); console.log(`… file[${i}].name = ${file.name}`); } }); } else { // DataTransfer インターフェイスを使用してファイルにアクセスする [...ev.dataTransfer.files].forEach((file, i) => { console.log(`… file[${i}].name = ${file.name}`); }); }}ブラウザー既定のドラッグ動作を阻止する
以下のdragover イベントハンドラーはpreventDefault() を呼び出して、ブラウザーの既定のドラッグ & ドロップハンドラーをオフにしています。
function dragOverHandler(ev) { console.log("File(s) in drop zone"); // 既定の動作で防ぐ（ファイルが開かれないようにする） ev.preventDefault();}