7.7.8 dropzone 属性
すべての HTML 要素には、dropzone コンテンツ属性をセットすることができます。指定する場合、その値は、一意的スペース区切り非順序トークン・セットでなければいけません。大文字と小文字を区別しません。利用可能な値は次の通りです。
copy-
該当の要素に受け入れ可能なアイテムをドロップすると、それはドラッグ・データのコピーになることを表します。
move-
該当の要素に受け入れ可能なアイテムをドロップすると、それは新たな場所に移動されるドラッグ・データになることを表します。
link-
該当の要素に受け入れ可能なアイテムをドロップすると、それはオリジナルのデータへのリンクになることを表します。
- 3 文字以上のキーワードで、そのうち最初の 2 文字が、U+0073 LATIN SMALL LETTER S と U+003A COLON、もしくは、U+0053 LATIN CAPITAL LETTER S と U+003A COLON となる場合（つまり、大文字と小文字を区別せずに、文字列 "s:" に一致する場合）
-
ドラッグ・データ・アイテムの種類が Plain Unicode string であり、かつ、ドラッグ・データ・アイテムのタイプ文字列がキーワードの残りの部分と一致する値にセットされているアイテムであれば受け入れ可能、ということを意味します。
- 3 文字以上のキーワードで、そのうち最初の 2 文字が、U+0066 LATIN SMALL LETTER F と U+003A COLON、もしくは、U+0046 LATIN CAPITAL LETTER F と U+003A COLON となる場合（つまり、大文字と小文字を区別せずに、文字列 "f:" に一致する場合）
-
ドラッグ・データ・アイテムの種類が File であり、かつ、ドラッグ・データ・アイテムのタイプ文字列がキーワードの残りの部分と一致する値にセットされているアイテムであれば受け入れ可能、ということを意味します。
dropzone コンテンツ属性の値には、3 つのフィードバック値（copy, move, link）に関しては同時に 2 つ以上をセットすることができません。もし何も指定されなかった場合は、copy が指定されたと見なされます。
dropzone 属性は、dropzone 処理手順の結果が一致となるなら、ドラッグ・ストアに一致します。
dropzone 属性は、dropzone 処理手順の結果が指定オペレーションとなるなら、オペレーションを指定します。指定オペレーションとは、以下の手順によって与えられるものです。
dropzone 処理手順は次の通りです。以下の通り、この手順は、一致なのか不一致なのか、そして、指定オペレーションかそうでないか、という別々の結果を返します。
-
value を、
dropzone属性の値とします。 -
keywords を、value をスペースで区切った結果とします。
-
matched を、false とします。
-
operation を、未指定とします。
-
keywords の値それぞれに対して、value の中における順番で、次の手順を実行します。
-
keyword を、そのキーワードとします。
-
keyword が "
copy", "move", "link" のいずれかなら、次の副手順を実行します：-
operation がまだ未指定なら、operation を、keyword によって与えられた文字列とします。
-
後述の キーワードの終わり とラベル付けされた手順にスキップします。
-
-
keyword の文字数が 3 文字に満たなければ、キーワードの終わり とラベル付けされた手順にスキップします。
-
keyword の 2 文字目が U+003A COLON character (:) でないなら、キーワードの終わり とラベル付けされた手順にスキップします。
-
kind code を、keyword の最初の文字を小文字に変換したものとします。
-
kind code の値に応じて、下記のリストのうち適切な手順にジャンプします：
- kind code が U+0073 LATIN SMALL LETTER S 文字の場合
-
kind を、Plain Unicode string とします。
- kind code が U+0066 LATIN SMALL LETTER F 文字の場合
-
kind を、File とします。
- いずれでもない場合
-
キーワードの終わり とラベル付けされた手順にスキップします。
-
type を、keyword にある全ての文字列としますが、最初の 2 文字を小文字に変換したものとします。
-
ドラッグ・データ・ストア・アイテム・リストの中に、ドラッグ・データ・アイテムの種類が kind に指定された種類に一致し、ドラッグ・アイテム・タイプが type となるアイテムが存在していれば、matched を true とします。
-
キーワードの終わり： 次のキーワードがあれば、この処理を繰り返します。もう無ければ、次の手順に移行します。
-
-
matched が true なら、このアルゴリズムの結果は一致ということになります。そうでなければ不一致ということになります。
operation が未指定なら、このアルゴリズムの結果は、指定オペレーションということになります。指定オペレーションは、もし指定されているなら、operation から得られるオペレーションとなります。
dropzone 属性は、同じ名前のコンテンツ属性を反映しなければいけません。
この例では、div 要素が、dropzone 属性を使って画像ファイルのドロップ対象とされています。この対象に画像にドロップされると、その画像が表示されます。
<div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
<p>Drop an image here to have it displayed.</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>
※ 原文：http://www.w3.org/TR/2011/WD-html5-20110113/dnd.html#the-dropzone-attribute