DataTransfer

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das DataTransfer-Objekt speichert Daten, die zwischen Kontexten übertragen werden, beispielsweise bei einer Drag-and-Drop-Operation oder beim Lesen und Schreiben über die Zwischenablage. Es kann ein oder mehrere Datenelemente enthalten, die jeweils einem oder mehreren Datentypen angehören.

DataTransfer wurde ursprünglich vor allem für die HTML Drag and Drop API als Eigenschaft DragEvent.dataTransfer entwickelt und ist weiterhin im Abschnitt zu HTML Drag and Drop spezifiziert. Inzwischen wird es jedoch auch von anderen APIs verwendet, etwa von ClipboardEvent.clipboardData und InputEvent.dataTransfer. Diese APIs verwenden allerdings nur bestimmte Teile der Schnittstelle und ignorieren Eigenschaften wie dropEffect. Diese Dokumentation behandelt hauptsächlich die Verwendung von DataTransfer bei Drag-and-Drop-Operationen. Informationen zur Verwendung in anderen Kontexten finden Sie in der Dokumentation der jeweiligen APIs.

Konstruktor

DataTransfer(): Erstellt ein neues DataTransfer-Objekt und gibt es zurück.

Instanzeigenschaften

DataTransfer.dropEffect: Gibt den Typ der aktuell ausgewählten Drag-and-Drop-Operation zurück oder legt einen neuen Typ fest. Der Wert muss none, copy, link oder move sein.
DataTransfer.effectAllowed: Gibt alle zulässigen Operationstypen an. Der Wert muss none, copy, copyLink, copyMove, link, linkMove, move, all oder uninitialized sein.
DataTransfer.files Schreibgeschützt: Enthält eine Liste aller lokalen Dateien, die bei der Datenübertragung verfügbar sind. Wenn bei der Drag-Operation keine Dateien gezogen werden, ist diese Liste leer.
DataTransfer.items Schreibgeschützt: Gibt ein DataTransferItemList-Objekt zurück, das alle Drag-Daten auflistet.
DataTransfer.types Schreibgeschützt: Ein Array von Zeichenfolgen mit den Formaten, die beim dragstart-Ereignis festgelegt wurden.

Instanzmethoden

DataTransfer.addElement(): Legt das angegebene Element als Quelle der Drag-Operation fest. Auf diesem Element werden die Ereignisse drag und dragend ausgelöst, statt auf dem standardmäßigen Zielelement (dem gezogenen Knoten). Firefox-spezifisch.
DataTransfer.clearData(): Entfernt die Daten, die einem bestimmten Typ zugeordnet sind. Das Typ-Argument ist optional. Wenn der Typ leer oder nicht angegeben ist, werden die Daten aller Typen entfernt. Sind für den angegebenen Typ keine Daten vorhanden oder enthält die Datenübertragung keine Daten, hat diese Methode keine Wirkung.
DataTransfer.getData(): Ruft die Daten für einen bestimmten Typ ab. Sind für diesen Typ keine Daten vorhanden oder enthält die Datenübertragung keine Daten, wird eine leere Zeichenfolge zurückgegeben.
DataTransfer.setData(): Legt die Daten für einen bestimmten Typ fest. Sind für den Typ noch keine Daten vorhanden, werden sie am Ende hinzugefügt, sodass das neue Format der letzte Eintrag in der Liste der Typen ist. Sind bereits Daten für den Typ vorhanden, werden sie an derselben Position ersetzt.
DataTransfer.setDragImage(): Legt ein benutzerdefiniertes Bild fest, das beim Ziehen verwendet werden soll.

Beispiele

Jede hier aufgeführte Methode und Eigenschaft hat eine eigene Referenzseite. Jede dieser Seiten enthält entweder direkt ein Beispiel für die Schnittstelle oder einen Link zu einem Beispiel.

Daten bei einem Einfüge- oder Drop-Ereignis lesen

Im folgenden Beispiel enthält ein <form> drei unterschiedliche Arten von Texteingaben: ein <input>-Element für Text, ein <textarea>-Element und ein <div>-Element, bei dem contenteditable auf true gesetzt ist. Sie können Text in jedes dieser Elemente einfügen oder dort ablegen. Anschließend werden die Daten aus dem Objekt ClipboardEvent.clipboardData beziehungsweise DragEvent.dataTransfer angezeigt.

HTML

html

<form>
  <fieldset>
    <legend>&lt;input /></legend>
    <input type="text" />
    <table class="center">
      <tbody>
        <tr>
          <th scope="row">Operation type</th>
          <td></td>
        </tr>
        <tr>
          <th scope="row">Content type</th>
          <td></td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <fieldset>
    <legend>&lt;textarea /></legend>
    <textarea></textarea>
    <table class="center">
      <tbody>
        <tr>
          <th scope="row">Operation type</th>
          <td></td>
        </tr>
        <tr>
          <th scope="row">Content type</th>
          <td></td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <fieldset>
    <legend>&lt;div contenteditable /></legend>
    <div contenteditable></div>
    <table class="center">
      <tbody>
        <tr>
          <th scope="row">Operation type</th>
          <td></td>
        </tr>
        <tr>
          <th scope="row">Content type</th>
          <td></td>
        </tr>
      </tbody>
    </table>
  </fieldset>
  <p class="center">
    <input type="reset" />
  </p>
</form>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

CSS

css

.center {
  text-align: center;
}

form > fieldset > * {
  vertical-align: top;
}
form input,
form textarea,
form [contenteditable] {
  min-width: 15rem;
  padding: 0.25rem;
}
[contenteditable] {
  appearance: textfield;
  display: inline-block;
  min-height: 1rem;
  border: 1px solid;
}

form table {
  display: inline-table;
}
table ol {
  text-align: left;
}

JavaScript

const form = document.querySelector("form");

function displayData(event) {
  if (event.type === "drop") event.preventDefault();

  const cells = event.target.nextElementSibling.querySelectorAll("td");
  cells[0].textContent = event.type;
  const transfer = event.clipboardData || event.dataTransfer;
  const ol = document.createElement("ol");
  cells[1].textContent = "";
  cells[1].appendChild(ol);
  for (const item of transfer.items) {
    const li = document.createElement("li");
    li.textContent = `${item.kind} ${item.type}`;
    ol.appendChild(li);
  }
}

form.addEventListener("paste", displayData);
form.addEventListener("drop", displayData);
form.addEventListener("reset", () => {
  for (const cell of form.querySelectorAll("[contenteditable], td")) {
    cell.textContent = "";
  }
});

Ergebnis

Spezifikationen

Spezifikation
HTML # the-datatransfer-interface

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden