dropzone=""
| ブラウザ | --- |
|---|
dropzone属性は、ドロップしたアイテムの受け入れ方法を指定します。
- この属性はHTML 5.1で追加されました。
<div dropzone="copy file:image/gif file:image/jpeg file:image/png" title="ドロップ領域" ondrop="...">
ここにドロップしてください
</div>
| 属性 | 値 | ||
|---|---|---|---|
| グローバル属性 | |||
dropzone="" |
アイテムの処理方法 | copy |
アイテムのコピーを受け入れる （初期値） |
move |
アイテムを移動する | ||
link |
アイテムへのリンクを作成する | ||
| アイテムの種類 | string: ～ |
文字列を受け入れる | |
file: ～ |
ファイル名とバイナリデータを受け入れる | ||
- 上記の
copy、move、linkについては、同時に2つ以上を指定することはできません。いずれも指定されなかった場合はcopyが指定されたものとみなされます。
dropzone属性は、その場所がドロップ可能な領域であることを表します。
この属性の値には、ドロップしたアイテムの処理方法と、受け入れるアイテムの種類を指定することになります。
アイテムの処理方法
ドロップしたアイテムを、どのように処理するのかを指定します。指定できる値は次の3つです。
copy- アイテムがその場所にコピーされます。
move- アイテムをその場所に移動します。
link- アイテムへのリンクが作成されます。
アイテムの種類
続いて、受け入れるアイテムの種類を指定します。string: または file: に続けて、アイテムのMIMEタイプなどを記述します。
string:～- 文字列を受け入れます。
file:～- ファイル名とバイナリデータを受け入れます。
例えば、GIF画像のみを受け入れたい場合は、file: に続けてGIFのMIMEタイプを指定します。
dropzone="file:image/gif"
複数の種類を指定したい場合は、次のように半角スペースで区切って記述します。
dropzone="file:image/gif file:image/jpeg file:image/png"
処理方法の指定を加えると次のようになります。
dropzone="copy file:image/gif file:image/jpeg file:image/png"
スクリプトが必要です
ドロップされたアイテムを受け取るには、その処理を行うスクリプトが必要となります。
- 詳細未確認
title属性の指定
HTML 5.1の仕様書では、dropzone属性を持つ要素は、非視覚的なやりとりのためにtitle属性で名付けるべきとしています。
- これは、その要素がドロップ可能な領域であることを、title属性を使って識別できるようにしておくという意味になるかと思います。
指定できる要素
dropzone属性はグローバル属性のため、HTML5の全ての要素に指定することができます。
使用例
- 以下のサンプルには、JavaScriptが組み込まれていません。（対応しているブラウザでも動作しません）
<p><img src="sample.gif" alt="SAMPLE" draggable="true"></p>
<div dropzone="copy file:image/gif file:image/jpeg file:image/png" title="ドロップ領域" ondrop="...">
ここに画像をドロップしてください
</div>
- 表示例
-
ここに画像をドロップしてください