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 July 2015.

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

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

Syntax

js
setData(format, data)

Parameter

format

Ein String, der den Typ der hinzuzufügenden Drag-Daten zum DataTransfer repräsentiert.

data

Ein String, der die hinzuzufügenden Daten zum DataTransfer repräsentiert.

Rückgabewert

Keiner (undefined).

Beispiele

Ziehen eines Elements

In diesem Beispiel können wir ein <p>-Element in ein Ziel-<div>-Element ziehen.

  • Im dragstart-Handler verwenden wir setData(), um die id des <p>-Elements zum 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

js
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());

Ergebnis

Spezifikationen

Specification
HTML
# dom-datatransfer-setdata-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
setData

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch