DataTransferItemList: add() Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit November 2016 browserübergreifend verfügbar.
Die add() Methode der DataTransferItemList Schnittstelle erstellt ein neues DataTransferItem mit den angegebenen Daten und fügt es der Drag-Datenliste hinzu. Das Element kann eine File oder eine Zeichenkette eines bestimmten Typs sein. Wenn das Element erfolgreich zur Liste hinzugefügt wird, wird das neu erstellte DataTransferItem Objekt zurückgegeben.
Während eines Drag-Vorgangs kann diese Methode nur im Handler für das dragstart Ereignis verwendet werden, da dies der einzige Zeitpunkt ist, an dem der Datenspeicher des Drag-Vorgangs beschreibbar ist. Ein Aufruf dieser Methode von einem anderen Drag-Ereignis aus gibt null zurück, ohne ein Element hinzuzufügen. Weitere Details finden Sie unter Modifying the drag data store.
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
NotSupportedErrorDOMException-
Wird ausgelöst, wenn der String
dataParameter angegeben 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" 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">Drop Zone</div>
CSS
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
const source = document.getElementById("source");
const target = document.getElementById("target");
source.addEventListener("dragstart", (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");
});
source.addEventListener("dragend", (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();
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// Loop through the dropped items and log their data
for (const item of event.dataTransfer.items) {
if (item.kind === "string" && item.type.match("^text/plain")) {
// This item is the target node
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type.match("^text/html")) {
// Drag data item is HTML
item.getAsString((s) => {
console.log(`… Drop: HTML = ${s}`);
});
} else if (item.kind === "string" && item.type.match("^text/uri-list")) {
// Drag data item is URI
item.getAsString((s) => {
console.log(`… Drop: URI = ${s}`);
});
}
}
});
target.addEventListener("dragover", (ev) => {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move";
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-datatransferitemlist-add-dev |