“dropzone”属性｜グローバル属性｜HTML－havin' a coffee break

＃

“dropzone”属性について

“dropzone”属性はドラッグして要素にドロップしたアイテムを受け入れるかどうかと、その受け入れ方法を指定する属性です。

ドロップされた後の動作はスクリプトで設定します。

この属性はHTML5.2で廃止されているため使用するべきではありません。

＃

指定できる値

属性値	説明
copy	ドロップしたアイテムは要素内にコピーされる
move	ドロップされたアイテムは要素内に移動される
link	ドロップされたアイテムへのリンクを生成する

以上の値は“dropzone”属性にいずれか一つしか指定することができません。加えて以下の属性値を空白文字で区切ることで受け入れるアイテムの種類を指定することができます。以下の値は複数指定可能です。

属性値	説明
string:MIMEタイプ	指定されたMIMEタイプのアイテムを文字列として受け取る
file:MIMEタイプ	指定されたMIMEタイプのアイテムをファイルとして受け取る

＃

サンプルコード



<p><img src="sample.png" alt="サンプルの画像" draggable="true"></p>

<div dropzone="copy file:image/png" ondrop="receive(event, this)" style=" height:100px; background-color: rgb(215,206,202);">

ここにドロップされた画像が表示されます。


</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>

グローバル属性~“dropzone”属性

“dropzone”属性について

指定できる値

サンプルコード