DataTransfer: items プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年4月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

items は DataTransfer インターフェイスの読み取り専用プロパティで、ドラッグ操作でのデータ転送項目のリストです。リストには操作中のアイテムごとに 1 つの項目が含まれており、操作にアイテムがなかった場合はリストは空になります。

値

ドラッグ操作でドラッグされるアイテムを表す DataTransferItem オブジェクトを含む DataTransferItemList オブジェクトで、ドラッグされるオブジェクトごとに 1 つのリスト項目があります。ドラッグ操作にデータがない場合、リストは空になります。

例

ドラッグされた項目の記録

この例では、items を使って、ドラッグした項目の情報を記録します。

HTML

html

<ul>
 <li id="source1" draggable="true">アイテム 1 をドロップゾーンにドラッグ</li>
 <li id="source2" draggable="true">アイテム 2 をドロップゾーンにドラッグ</li>
</ul>
<div id="target">ドロップゾーン</div>
<button id="reset">リセット</button>

CSS

css

div {
 margin: 0em;
 padding: 2em;
}
#target {
 border: 1px solid black;
}

JavaScript

function dragstartHandler(ev) {
 console.log(`dragstart: target.id = ${ev.target.id}`);
 // この要素の ID をドラッグの内容に追加し、ドロップハンドラーがどの
 // 要素をツリーに追加すればよいかを知ることができるようにします。
 ev.dataTransfer.setData("text/plain", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
}
function dropHandler(ev) {
 ev.preventDefault();
 // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します
 const data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
 // 各項目の "kind" と "type" を表示する
 if (ev.dataTransfer.items) {
 for (const item of ev.dataTransfer.items) {
 console.log(`kind = ${item.kind}, type = ${item.type}`);
 }
 }
}
function dragoverHandler(ev) {
 ev.preventDefault();
 // dropEffect を move に設定する
 ev.dataTransfer.dropEffect = "move";
}
const source1 = document.querySelector("#source1");
const source2 = document.querySelector("#source2");
const target = document.querySelector("#target");
source1.addEventListener("dragstart", dragstartHandler);
source2.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());