DataTransfer: types-Eigenschaft

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 schreibgeschützte Eigenschaft DataTransfer.types gibt die verfügbaren Typen zurück, die in den items existieren.

Wert

Ein Array der Datenformate. Jedes Format ist eine Zeichenkette, die im Allgemeinen ein MIME-Typ wie text/plain oder text/html ist. Wenn der Ziehvorgang keine Daten enthielt, wird diese Liste leer sein. Wenn beim Ziehvorgang Dateien enthalten sind, dann wird einer der Typen die Zeichenkette Files sein.

Beispiele

Dieses Beispiel zeigt die Verwendung der Eigenschaften types und items.

html
<ul>
  <li id="i1" draggable="true">Drag Item 1 to the Drop Zone</li>
  <li id="i2" draggable="true">Drag Item 2 to the Drop Zone</li>
</ul>
<div id="target">Drop Zone</div>
<pre id="output"></pre>
css
div {
  margin: 0em;
  padding: 2em;
}
#target {
  border: 1px solid black;
}
js
const output = document.getElementById("output");
function log(msg) {
  output.textContent += `${msg}\n`;
}

document.querySelectorAll("li").forEach((item) => {
  item.addEventListener("dragstart", dragstart_handler);
});

function dragstart_handler(ev) {
  log(`dragStart: target.id = ${ev.target.id}`);

  // Add this element's id to the drag payload so the drop handler will
  // know which element to add to its tree
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

const target = document.getElementById("target");

target.addEventListener("drop", (ev) => {
  log(`drop: target.id = ${ev.target.id}`);
  ev.preventDefault();

  // Get the id of the target and add the moved element to the target's DOM
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));

  // Print each format type
  for (let i = 0; i < ev.dataTransfer.types.length; i++) {
    log(`… types[${i}] = ${ev.dataTransfer.types[i]}`);
  }

  // Print each item's "kind" and "type"
  for (let i = 0; i < ev.dataTransfer.items.length; i++) {
    log(
      `… items[${i}].kind = ${ev.dataTransfer.items[i].kind}; type = ${ev.dataTransfer.items[i].type}`,
    );
  }
});

target.addEventListener("dragover", (ev) => {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
});

Spezifikationen

Specification
HTML
# dom-datatransfer-types-dev

Browser-Kompatibilität

Siehe auch