DataTransfer

DataTransfer()

Erstellt und gibt ein neues DataTransfer-Objekt zurück.

DataTransfer.dropEffect

Holt den Typ der derzeit ausgewählten Drag-and-Drop-Operation oder setzt die Operation auf einen neuen Typ. Der Wert muss none, copy, link oder move sein.

DataTransfer.effectAllowed

Gibt alle möglichen Operationstypen an. Muss einer der folgenden Werte sein: none, copy, copyLink, copyMove, link, linkMove, move, all oder uninitialized.

DataTransfer.files Schreibgeschützt

Enthält eine Liste aller lokalen Dateien, die im Datentransfer verfügbar sind. Wenn der Drag-Vorgang nicht das Ziehen von Dateien beinhaltet, ist diese Eigenschaft eine leere Liste.

DataTransfer.items Schreibgeschützt

Gibt ein DataTransferItemList-Objekt zurück, das eine Liste aller Drag-Daten ist.

DataTransfer.types Schreibgeschützt

Ein Array von Zeichenfolgen, das die Formate angibt, die im dragstart-Ereignis festgelegt wurden.

DataTransfer.addElement() Experimentell Nicht standardisiert

Setzt die Drag-Quelle für das gegebene Element. Dies wird das Element sein, auf dem die Ereignisse drag und dragend ausgelöst werden, und nicht das Standardziel (der Knoten, der gezogen wurde). Firefox-spezifisch.

DataTransfer.clearData()

Entfernt die Daten des gegebenen Typs. Das Typ-Argument ist optional. Wenn der Typ leer oder nicht angegeben ist, werden die Daten für alle Typen entfernt. Wenn keine Daten für den angegebenen Typ existieren oder der Datentransfer keine Daten enthält, hat diese Methode keine Auswirkungen.

DataTransfer.getData()

Ruft die Daten für einen gegebenen Typ ab oder gibt eine leere Zeichenfolge zurück, wenn keine Daten für diesen Typ existieren oder der Datentransfer keine Daten enthält.

DataTransfer.setData()

Setzt die Daten für einen gegebenen Typ. Wenn keine Daten für den Typ existieren, werden sie am Ende hinzugefügt, sodass das letzte Element in der Typenliste das neue Format ist. Wenn bereits Daten für den Typ existieren, werden die bestehenden Daten an derselben Position ersetzt.

DataTransfer.setDragImage()

Setzt das Bild, das für das Ziehen verwendet werden soll, wenn ein benutzerdefiniertes Bild gewünscht ist.

Jede in diesem Dokument aufgeführte Methode und Eigenschaft hat ihre eigene Referenzseite, und jede Referenzseite enthält entweder direkt ein Beispiel der Schnittstelle oder einen Link zu einem Beispiel.

Im folgenden Beispiel haben wir ein <form>, das drei verschiedene Arten von Texteingaben enthält: ein Text-<input>-Element, ein <textarea>-Element und ein <div>-Element mit contenteditable auf true gesetzt. Der Benutzer kann Text in eines dieser Elemente einfügen oder ablegen, und die Daten im ClipboardEvent.clipboardData oder DragEvent.dataTransfer-Objekt werden angezeigt.

HTML

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

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

• Drag and Drop
• Drag-Operationen
• Empfohlene Drag-Typen