DataTransferItemList: add() Methode
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die DataTransferItemList.add()
Methode erstellt ein neues
DataTransferItem
mit den angegebenen Daten und fügt es der Drag-Datenliste hinzu. Das Element kann eine File
oder ein String eines bestimmten Typs sein. Wenn das Element erfolgreich zur Liste hinzugefügt wird, wird das neu erstellte DataTransferItem
Objekt zurückgegeben.
Syntax
add(data, type)
add(file)
Parameter
Rückgabewert
Ein DataTransferItem
, das die angegebenen Daten enthält. Wenn das Drag-Element nicht erstellt werden konnte (zum Beispiel, wenn das zugehörige DataTransfer
Objekt keinen Datenspeicher hat), wird null
zurückgegeben.
Ausnahmen
NotSupportedError
DOMException
-
Wird ausgelöst, wenn der String
data
übergeben wurde und die Liste bereits ein Element enthält, dessenkind
"Plain Unicode string"
ist und dessen Typ dem angegebenen Typ-Parameter entspricht.
Beispiele
Dieses Beispiel zeigt die Verwendung der add()
Methode.
HTML
<div>
<p
id="source"
ondragstart="dragstart_handler(event);"
ondragend="dragend_handler(event);"
draggable="true">
Select this element, drag it to the Drop Zone and then release the selection
to move the element.
</p>
</div>
<div
id="target"
ondrop="drop_handler(event);"
ondragover="dragover_handler(event);">
Drop Zone
</div>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
function dragstart_handler(ev) {
console.log("dragStart");
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
const dataList = ev.dataTransfer.items;
dataList.add(ev.target.id, "text/plain");
// Add some other items to the drag payload
dataList.add("<p>Paragraph…</p>", "text/html");
dataList.add("http://www.example.org", "text/uri-list");
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
const data = event.dataTransfer.items;
// Loop through the dropped items and log their data
for (let i = 0; i < data.length; i++) {
if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
// This item is the target node
data[i].getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
// Drag data item is HTML
data[i].getAsString((s) => {
console.log(`… Drop: HTML = ${s}`);
});
} else if (
data[i].kind === "string" &&
data[i].type.match("^text/uri-list")
) {
// Drag data item is URI
data[i].getAsString((s) => {
console.log(`… Drop: URI = ${s}`);
});
}
}
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move";
}
function dragend_handler(ev) {
console.log("dragEnd");
const dataList = ev.dataTransfer.items;
for (let i = 0; i < dataList.length; i++) {
dataList.remove(i);
}
// Clear any remaining drag data
dataList.clear();
}
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # dom-datatransferitemlist-add-dev |
Browser-Kompatibilität
BCD tables only load in the browser