DataTransfer: setData() Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die DataTransfer.setData()-Methode setzt die Zugdaten der Ziehoperation auf die angegebenen Daten und den Typ. Wenn Daten für den angegebenen Typ nicht existieren, werden sie am Ende des Zugdaten-Speichers hinzugefügt, sodass das letzte Element in der types-Liste der neue Typ sein wird. Wenn Daten für den angegebenen Typ bereits existieren, werden die vorhandenen Daten an derselben Position ersetzt. Das bedeutet, dass die Reihenfolge der types-Liste nicht geändert wird, wenn Daten desselben Typs ersetzt werden.

Beispieldatentypen sind text/plain und text/uri-list.

Syntax

setData(format, data)

Parameter

format: Ein String, der den Typ der Ziehdaten darstellt, die dem DataTransfer hinzugefügt werden sollen.
data: Ein String, der die Daten darstellt, die dem DataTransfer hinzugefügt werden sollen.

Im dragstart-Handler verwenden wir setData(), um die id des <p>-Elements dem DataTransfer-Objekt hinzuzufügen.
Im drop-Handler rufen wir die id ab und verwenden sie, um das <p>-Element in das Ziel zu verschieben.

HTML

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> <button id="reset">Reset example</button>

CSS

css

div { margin: 0.5em 0; padding: 2em; } #target, #source { border: 1px solid black; padding: 0.5rem; } .dragging { background-color: pink; }

JavaScript

const source = document.querySelector("#source"); source.addEventListener("dragstart", (ev) => { console.log("dragStart"); // Change the source element's background color // to show that drag has started ev.currentTarget.classList.add("dragging"); // Clear the drag data cache (for all formats/types) ev.dataTransfer.clearData(); // Set the drag's format and data. // Use the event target's id for the data ev.dataTransfer.setData("text/plain", ev.target.id); }); source.addEventListener("dragend", (ev) => ev.target.classList.remove("dragging"), ); const target = document.querySelector("#target"); target.addEventListener("dragover", (ev) => { console.log("dragOver"); ev.preventDefault(); }); target.addEventListener("drop", (ev) => { console.log("Drop"); ev.preventDefault(); // Get the data, which is the id of the source element const data = ev.dataTransfer.getData("text"); const source = document.getElementById(data); ev.target.appendChild(source); }); const reset = document.querySelector("#reset"); reset.addEventListener("click", () => document.location.reload());