DataTransfer: getData()-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 DataTransfer.getData()
-Methode ruft Drag-Daten (als Zeichenkette) für den angegebenen Typ ab.
Falls der Drag-Vorgang keine Daten enthält, gibt diese Methode eine leere Zeichenkette zurück.
Beispieldatentypen sind text/plain
und text/uri-list
.
Syntax
getData(format)
Parameter
format
-
Eine Zeichenkette, die den Typ der abzurufenden Daten darstellt.
Rückgabewert
Eine Zeichenkette, die die Drag-Daten für das angegebene format
darstellt. Wenn der Drag-Vorgang keine Daten enthält oder keine Daten für das angegebene format
vorliegen, gibt diese Methode eine leere Zeichenkette zurück.
Beachten Sie, dass DataTransfer.getData()
möglicherweise nicht den erwarteten Wert zurückgibt, da es nur erlaubt, Daten für bestimmte Ereignisse zu lesen und zu schreiben. Während der Ereignisse dragstart
und drop
ist es sicher, auf die Daten zuzugreifen. Für alle anderen Ereignisse sollten die Daten als nicht verfügbar betrachtet werden. Trotzdem können die Elemente und ihre Formate weiterhin aufgezählt werden.
Beispiele
Dieses Beispiel zeigt die Verwendung der DataTransfer
-Objekt-Methoden
getData()
und setData()
.
HTML
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="drag" draggable="true" ondragstart="drag(event)"
>drag me to the other box</span
>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
CSS
#div1,
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
JavaScript
function allowDrop(allowDropEvent) {
allowDropEvent.target.style.color = "blue";
allowDropEvent.preventDefault();
}
function drag(dragEvent) {
dragEvent.dataTransfer.setData("text", dragEvent.target.id);
dragEvent.target.style.color = "green";
}
function drop(dropEvent) {
dropEvent.preventDefault();
const data = dropEvent.dataTransfer.getData("text");
dropEvent.target.appendChild(document.getElementById(data));
document.getElementById("drag").style.color = "black";
}
Ergebnis
Spezifikationen
Specification |
---|
HTML # dom-datatransfer-getdata-dev |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
getData |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support