DataTransferItemList: add() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年11月.
DataTransferItemList.add() メソッドは、指定されたデータを使用して新しい DataTransferItem を作成し、ドラッグデータリストに追加します。アイテムは File または指定された種類の文字列です。リストへの追加が成功すると、新しく作成された DataTransferItem オブジェクトが返されます。
構文
js
add(data, type)
add(file)
引数
返値
指定したデータを格納した DataTransferItem を返します。ドラッグアイテムを作成できなかった場合（例えば、関連する DataTransfer オブジェクトがデータストアを持たない場合）、null が返されます。
例外
NotSupportedErrorDOMException-
文字列で
data引数が提供され、kindが"Plain Unicode string"で、指定されたtype引数と等しい型の項目がリストに既に格納されている場合に発生します。
例
この例では、 add() メソッドを使用しています。
HTML
html
<div>
<p id="source" draggable="true">
この要素を選択し、ドロップゾーンまでドラッグして、選択を解除すると要素が移動します。
</p>
</div>
<div id="target">ドロップゾーン</div>
CSS
css
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
js
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;
for (let i = 0; i < dataList.length; i++) {
dataList.remove(i);
}
// 残っているドラッグデータをすべてクリア
dataList.clear();
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// ドロップされたアイテムをループ処理し、そのデータをログに記録
for (const item of event.dataTransfer.items) {
if (item.kind === "string" && item.type.match("^text/plain")) {
// アイテムがターゲットノード
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type.match("^text/html")) {
// ドラッグデータ項目が HTML
item.getAsString((s) => {
console.log(`… Drop: HTML = ${s}`);
});
} else if (item.kind === "string" && item.type.match("^text/uri-list")) {
// ドラッグデータ項目が URI
item.getAsString((s) => {
console.log(`… Drop: URI = ${s}`);
});
}
}
});
target.addEventListener("dragover", (ev) => {
console.log("dragOver");
ev.preventDefault();
// dropEffect を「移動」に設定
ev.dataTransfer.dropEffect = "move";
});
結果
仕様書
| Specification |
|---|
| HTML # dom-datatransferitemlist-add-dev |