dropzone 属性ドロップ操作の受け入れ可否を指定する

dropzone 属性はドロップ操作の受け入れ可否を指定します。

dropzone 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。dropzone 属性には、下記の値が指定できます。

属性値 概要
copy ドロップされたアイテムは該当要素内にコピーされます
move ドロップされたアイテムは該当要素内に移動されます
link ドロップされたアイテムの元データにリンクされます

上記値は、属性に対して 1つしかセットできません。値が空の場合は、copy として扱われます。

また、あわせて受け入れ可能なコンテンツのタイプを指定することができます。

属性値 概要
s:(S:)に続けて MIME タイプなどを指定 指定されたタイプのアイテムを文字列として受け取る
f:(F:)に続けて MIME タイプなどを指定 指定されたタイプのアイテムをファイルとして受け取る

サンプルソースを見る

dropzone 属性の仕様

この属性を使用できる要素
  • すべての HTML5 要素

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>

W3C HTML5 仕様書

7.7.8 The dropzone attribute