dropzone属性とは

dropzone属性は、要素をドロップした時の挙動を指定する属性です。属性値にはドロップしたコンテンツの挙動と受け入れるコンテンツの種類を指定します。

属性値

[コンテンツの挙動]

  • "copy": ドロップされたコンテンツを要素内にコピー
  • "move": ドロップされたコンテンツを要素内に移動
  • "link": ドロップされたコンテンツの元データにリンク

[受け入れるコンテンツの種類]

  • "s:" + MIMEタイプなど: 文字列
  • "f:" + MIMEタイプなど: ファイル
利用できるバージョン(HTML4.01以降)
HTML5.1 〜
対応ブラウザ

dropzone属性を使ったサンプル

dropzone属性の例
<p>
  <img src="img/sample.png" alt="サンプル" width="150" height="150" dropzone="true">
</p>
<div dropzone="copy f:image/png" ondrop="receive(event, this)">
  ここに画像ファイルをドロップするとコピーします。(対応ブラウザのみ)
</div>
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('^img/'))) {
     var img = new Image();
      img.src = window.createObjectURL(data[i].getAsFile());
      element.appendChild(img);
    }
  }
}
ブラウザでの表示例

RERUN

仕様

HTML5.1
5.7.8. The dropzone attribute

関連する属性

関連するレッスン