The HTML "dropzone" attribute was proposed to specify how dropped files (copy, move, or link) are handled as part of drag-and-drop functionality, but it is effectively deprecated because it is hardly supported by modern browsers.
dropzone属性は、HTML5のドラフト仕様の段階で提案された、ドラッグアンドドロップ(Drag and Drop)操作をより簡単に扱うための属性です。例えば、<div>や<section>などの要素に対してdropzoneを指定することで、ユーザーがファイルなどをドラッグ&ドロップしやすくするというのが主な目的でした。
しかし、2023年現在、dropzone属性は実装状況が十分ではなく、公式なHTML Living Standardからは削除されています。ブラウザによっては無視されるか、実験的な機能として対応している可能性があるものの、実質的には利用が推奨されない属性になっています。
HTML5で導入されたドラッグアンドドロップ機能には、JavaScriptのイベント(dragstart, dragover, dropなど)を使う「Drag and Drop API」が存在します。このAPIを利用すれば、要素をドラッグ可能にしたり、ドロップされたファイルを読み取ったりといった操作が可能です。
dropzone属性はこのAPIの簡易的なものとして位置づけられていましたが、仕様としては完成しておらず、多くのブラウザが正式サポートを見送った経緯があります。
本来の仕様上では、dropzone属性には以下のような値を指定することができるとされていました:
copymovelink複数指定する場合には、スペース区切りで書くことが想定されていました (例: dropzone="copy move")。
しかし、前述の通り実際のブラウザがどこまで正確に対応しているかは定かではありません。
もしもdropzoneがブラウザに対応している場合のサンプルは次のようになります:
HTML
<div id="drop-area" dropzone="copy move">
ここにファイルをドロップしてください
</div>このコードは、<div>要素に対してcopyとmoveを指定している例です。ユーザーがファイルをドラッグしてきてこの領域にドロップした時、適切に処理されることを意図します。
ただし、多くのブラウザでは上記のコードだけでは何も起こらず、JavaScriptによるイベントのハンドリングが必要になります。
dropzone属性は無視されると考えられます。dropzoneは有効活用されていません。現在のChromium版Edgeでも基本的にはChromeと同様です。dropzoneはサポートしていません。結論として、dropzone属性はほぼサポートされていないか、常に無視されるという認識でよいでしょう。
サポートされていたとしても、ブラウザ差異が大きく、実践的に使うのは困難です。
上記の通り、dropzone属性自体はブラウザ間でほぼ機能しないため、実践的にドラッグアンドドロップ機能を実装したい場合はJavaScriptのDrag and Drop APIを直接利用するのが一般的です。
draggable="true"を設定するdragstartイベントでデータをセットする (例: event.dataTransfer.setData)dragoverイベントを拾い、event.preventDefault()する (ドロップを受け付け可能にする)dropイベントでevent.dataTransfer.getDataを使い、ドラッグされたデータを取得するevent.dataTransfer.files配列でファイルオブジェクトを取得し、FileReader APIなどで読み込むファイルをドロップさせるだけなら、フォーム要素の<input type="file">を使う方法のほうが手軽に思えますが、WebアプリケーションのUI/UX向上や、アップロードする前にプレビューを見せる・アップロード枚数を制限するなどの高度な操作をしたい場合は、Drag and Drop APIとFile APIを組み合わせることがよくあります。
以下は、dropzone属性を実際に書いてはいるものの、あくまで機能を実現しているのはJavaScriptのDrag and Drop APIだという例を示します。dropzone属性が実質機能しなくても、JavaScriptがあればドラッグアンドドロップは動作します。
HTML
<div id="drop-area" dropzone="copy move">
ここにファイルをドロップしてください
</div>
<script>
const dropArea = document.getElementById('drop-area');
// ドラッグ要素が領域内に入ってきたとき
dropArea.addEventListener('dragenter', (event) => {
event.preventDefault();
dropArea.classList.add('hover');
});
// ドラッグ要素が領域内を移動しているとき
dropArea.addEventListener('dragover', (event) => {
event.preventDefault();
});
// ドラッグ要素が領域外に出たとき
dropArea.addEventListener('dragleave', () => {
dropArea.classList.remove('hover');
});
// ファイルがドロップされたとき
dropArea.addEventListener('drop', (event) => {
event.preventDefault();
dropArea.classList.remove('hover');
// ドロップされたファイルを取得
const files = event.dataTransfer.files;
if (files.length > 0) {
alert(`${files.length} 個のファイルがドロップされました。`);
// ファイルの処理を行う（アップロードやプレビュー表示など）
}
});
</script>このサンプルのポイントは以下の通りです:
dropzone="copy move"を指定してはいるものの、このコードはブラウザによっては何もしません。dragenter, dragover, dragleave, dropなどのJavaScriptイベントです。event.preventDefault()を忘れるとドロップが無効化されてしまうブラウザもあるため注意しましょう。alertではなく、実際にはアップロード処理やプレビュー処理などを行うことが多いです。dropzone属性の代替手段・応用方法dropzone属性ではなく、JavaScriptのイベントハンドラを用いるのが主流です。dropzoneは指定するだけでドラッグ&ドロップが完結するわけではないdropzone属性はHTML5のドラフトで提案されましたが、現在は非推奨・未実装の要素が多いため、実用上は使わない方が無難です。dropzone属性に頼るのではなく、APIとライブラリを組み合わせて実装しましょう。