DataTransfer: getData() Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Die getData() Methode der DataTransfer Schnittstelle ruft Ziehdaten (als Zeichenkette) für den angegebenen Typ ab. Wenn der Ziehvorgang keine Daten enthält, gibt diese Methode eine leere Zeichenkette zurück.
Beispiele für Datentypen sind text/plain und text/uri-list.
Während eines Ziehvorgangs kann diese Methode nur in den Handlern für die dragstart und drop Ereignisse Daten lesen, da dies die einzigen Zeiten sind, in denen der Ziehdaten-Speicher lesbar ist. Ein Aufruf dieser Methode von anderen Ziehereignissen gibt eine leere Zeichenkette zurück. Weitere Details finden Sie unter Lesen des Ziehdaten-Speichers.
Syntax
getData(format)
Parameter
format-
Ein String, der den Typ der abzurufenden Daten darstellt.
Rückgabewert
Eine Zeichenkette, die die Ziehdaten für das angegebene format darstellt. Wenn der Ziehvorgang keine Daten hat oder der Vorgang keine Daten für das angegebene format hat, gibt diese Methode eine leere Zeichenkette zurück.
Die Elemente und ihre Formate können weiterhin während anderer Ziehereignisse mithilfe von DataTransfer.items und DataTransfer.types aufgezählt werden.
Beispiele
Dieses Beispiel zeigt die Verwendung der DataTransfer Objekts getData() und der setData() Methoden.
HTML
<div id="div1">
<span id="drag" draggable="true">drag me to the other box</span>
</div>
<div id="div2"></div>
CSS
#div1,
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
JavaScript
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const dragElement = document.getElementById("drag");
dragElement.addEventListener("dragstart", drag);
div1.addEventListener("dragover", allowDrop);
div2.addEventListener("dragover", allowDrop);
div1.addEventListener("drop", drop);
div2.addEventListener("drop", drop);
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));
dragElement.style.color = "black";
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-datatransfer-getdata-dev |