DataTransfer.items
読み取り専用の DataTransfer
プロパティの items
プロパティは、ドラッグ操作での list
の DataTransfer items
です。リストには操作中の項目ごとに1つの項目が含まれており、操作中に項目がなかった場合はリストは空になります。
シンタックス
itemList = dataTransfer.items;
戻り値
ドラッグ操作でドラッグされる項目を表す DataTransferItem
オブジェクトを含む DataTransferItemList
オブジェクトで、ドラッグされるオブジェクトごとに1つのリスト項目があります。ドラッグ操作にデータがない場合、リストは空です。
例
この例では、items
とtypes
プロパティを使用しています。
<!DOCTYPE html>
<html lang=ja>
<title>DataTransfer.{types,item}プロパティの例</title>
<meta content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart: target.id = " + ev.target.id);
// この要素の id をドラッグ ペイロードに追加し、
// drop ハンドラがどの要素をツリーに追加するかを知ることができるようにします。
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = "move";
}
function drop_handler(ev) {
console.log("drop: target.id = " + ev.target.id);
ev.preventDefault();
// ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
// 各フォーマットタイプをプリントする
if (ev.dataTransfer.types != null) {
for (var i=0; i < ev.dataTransfer.types.length; i++) {
console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
}
}
// 各項目の "kind" と "type" をプリントする
if (ev.dataTransfer.items != null) {
for (var i=0; i < ev.dataTransfer.items.length; i++) {
console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
}
}
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
// dropEffect を移動するように設定します。
ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1><code>DataTransfer</code>.{<code>types</code>, <code>items</code>} プロパティの例</h1>
<ul>
<li id="i1" ondragstart="dragstart_handler(event);" draggable="true">アイテム1をドロップゾーンにドラッグ</li>
<li id="i2" ondragstart="dragstart_handler(event);" draggable="true">アイテム2をドロップゾーンにドラッグ</li>
</ul>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
</body>
</html>
仕様
仕様書 | ステータス | コメント |
---|---|---|
HTML Living Standard items の定義 |
現行の標準 | |
HTML 5.1 items の定義 |
勧告 | 初期定義 |
ブラウザの互換性
BCD tables only load in the browser
あわせて参照
{{page("/ja/docs/Web/API/DataTransfer", "あわせて参照")}}