HTML Tag Reference

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>

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。