dropzone属性

dropzone属性は、要素にドロップした時のデータ処理方法と、データの種類を指定できるグローバル属性。

ブラウザ対応 なし

構文

<element dropzone="処理方法 種類">
処理方法
データ処理方法。
copy
ドラッグデータをコピー。初期設定値。
move
ドラッグデータを移動。
link
元データへのリンク。
種類
データの種類。下記の種類コードに続き、MIMEタイプを指定できる。
s:
文字列。
f:
ファイル。

要点

  • 要素にドロップした時のデータ処理方法と、データの種類を指定できる。
  • 全てのHTML要素で使用できるグローバル属性である。
  • HTML5にて新たに導入された属性である。

サンプルコード

データ処理方法

<div dropzone="copy">コピー</div>
<div dropzone="move">移動</div>
<div dropzone="link">リンク</div>

種類

<div dropzone="f:image/png">png形式の画像ファイル</div>
<div dropzone="f:image/jpeg">jpeg形式の画像ファイル</div>
<div dropzone="f:image/gif">gif形式の画像ファイル</div>

データ処理方法と種類

<div dropzone="copy f:image/png">png形式の画像ファイルをコピー</div>
<div dropzone="move f:image/jpeg">jpeg形式の画像ファイルを移動</div>
<div dropzone="link f:image/gif">gif形式の画像ファイルへのリンク</div>

サンプル

HTMLソースコード

<style scoped="scoped">
div.sampleDiv {
	width: 500px;
	padding: 2em;
	margin: 0.5em;
	border: 1px solid gray;
	border-radius: 6px;
	background-color: pink;
	text-align: center;
}
</style>
<p><img src="sample-draggable-true.png" draggable="true"></p>
<div class="sampleDiv" dropzone="copy" ondrop="JavaScriptコード">ドロップボックス</div>

実際の表示

ドロップボックス

サンプルの動作について

  • 「ドラッグ可能なimg要素」画像をドラッグし、ドロップボックスにドロップすると、ondropイベントに指定したJavaScriptコードを実行しようとする。
  • JavaScriptコードを指定していないので、実際には動作しない。

ドラッグ＆ドロップの実動サンプルは、姉妹サイトであるアルファシスの「ドラッグ＆ドロップで、div要素間を移動できるp要素」のページにある。