dropzone 属性ドロップ操作の受け入れ可否を指定する
dropzone 属性はドロップ操作の受け入れ可否を指定します。
dropzone 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。dropzone 属性には、下記の値が指定できます。
なお、HTML Standard 仕様では dropzone 属性は定義されていません。
| 属性値 | 概要 |
|---|---|
| copy | ドロップされたアイテムは該当要素内にコピーされます |
| move | ドロップされたアイテムは該当要素内に移動されます |
| link | ドロップされたアイテムの元データにリンクされます |
上記値は、属性に対して 1つしかセットできません。値が空の場合は、copy として扱われます。
また、あわせて受け入れ可能なコンテンツのタイプを指定することができます。
| 属性値 | 概要 |
|---|---|
| s:（S:）に続けて MIME タイプなどを指定 | 指定されたタイプのアイテムを文字列として受け取る |
| f:（F:）に続けて MIME タイプなどを指定 | 指定されたタイプのアイテムをファイルとして受け取る |
dropzone 属性の仕様
- この属性を使用できる要素
-
- すべての HTML 要素
dropzone 属性のサンプルソース
<div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
<p>ここに画像ファイルをドロップすると表示されます</p>
</div>
<script>
function receive(event, element) {
var data = event.dataTransfer.items;
for (var i = 0; i < data.length; i += 1) {
if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
var img = new Image();
img.src = window.createObjectURL(data[i].getAsFile());
element.appendChild(img);
}
}
}
</script>