dropzone属性とは
dropzone属性は、要素をドロップした時の挙動を指定する属性です。属性値にはドロップしたコンテンツの挙動と受け入れるコンテンツの種類を指定します。
- 属性値
-
[コンテンツの挙動]
- "copy": ドロップされたコンテンツを要素内にコピー
- "move": ドロップされたコンテンツを要素内に移動
- "link": ドロップされたコンテンツの元データにリンク
[受け入れるコンテンツの種類]
- "s:" + MIMEタイプなど: 文字列
- "f:" + MIMEタイプなど: ファイル
- 利用できるバージョン(HTML4.01以降)
- HTML5.1 〜
- 対応ブラウザ
- –
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