このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
DataTransferItemList: add() メソッド
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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";
});
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| HTML # dom-datatransferitemlist-add-dev |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。