Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/de/docs/Web/API/DataTransfer/setData below:

DataTransfer: setData() Methode - Web-APIs

Baseline Widely available

Die DataTransfer.setData() Methode setzt die Drag-Daten der Zieh-Operation auf die angegebenen Daten und den Typ. Wenn keine Daten für den angegebenen Typ existieren, wird dieser am Ende des Drag-Datenspeichers hinzugefügt, so dass das letzte Element in der types Liste der neue Typ sein wird. Wenn Daten für den angegebenen Typ bereits existieren, werden die existierenden Daten an derselben Position ersetzt. Das heißt, die Reihenfolge der types Liste wird nicht geändert, wenn Daten desselben Typs ersetzt werden.

Beispiele für Datentypen sind text/plain und text/uri-list.

format

Ein String, der den Typ der Drag-Daten darstellt, die zum DataTransfer hinzugefügt werden sollen.

data

Ein String, der die Daten darstellt, die zum DataTransfer hinzugefügt werden sollen.

Keiner (undefined).

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.

<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>

div {
  margin: 0.5em 0;
  padding: 2em;
}

#target,
#source {
  border: 1px solid black;
  padding: 0.5rem;
}

.dragging {
  background-color: pink;
}

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

Diese Seite wurde automatisch aus dem Englischen übersetzt.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4