DataTransferItemList: length プロパティ

<div>
 <p id="source" draggable="true">
 この要素を選択し、ドロップゾーンまでドラッグして、選択を解除すると要素が移動します。
 </p>
</div>
<div id="target">ドロップゾーン</div>

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

const source = document.getElementById("source");
const target = document.getElementById("target");
source.addEventListener("dragstart", (ev) => {
 console.log("dragStart");
 // この要素の ID をドラッグデータ本体に追加し、ドロップハンドラーが
 // どの要素をツリーに追加すべきかを認識できるようにする
 const dataList = ev.dataTransfer.items;
 dataList.add(ev.target.id, "text/plain");
 // ドラッグデータ本体に他のアイテムを追加する
 dataList.add("<p>段落...</p>", "text/html");
 dataList.add("http://www.example.org", "text/uri-list");
});
source.addEventListener("dragend", (ev) => {
 console.log("dragEnd");
 const dataList = ev.dataTransfer.items;
 // 残っているドラッグデータをすべてクリア
 dataList.clear();
});
target.addEventListener("drop", (ev) => {
 console.log("Drop");
 ev.preventDefault();
 const data = ev.dataTransfer.items;
 // ドロップされたアイテムをループ処理し、そのデータをログに記録
 for (let i = 0; i < data.length; i++) {
 if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
 // アイテムがターゲットノード
 data[i].getAsString((s) => {
 ev.target.appendChild(document.getElementById(s));
 });
 } else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
 // ドラッグデータ項目が HTML
 data[i].getAsString((s) => {
 console.log(`... Drop: HTML = ${s}`);
 });
 } else if (
 data[i].kind === "string" &&
 data[i].type.match("^text/uri-list")
 ) {
 // ドラッグデータ項目が URI
 data[i].getAsString((s) => {
 console.log(`... Drop: URI = ${s}`);
 });
 }
 }
});
target.addEventListener("dragover", (ev) => {
 console.log("dragOver");
 ev.preventDefault();
 // dropEffect を「移動」に設定
 ev.dataTransfer.dropEffect = "move";
});

MDN の改良に協力

このページは MDN の貢献者によって 2025年11月27日 に最終更新されました。