DataTransfer: dropEffect-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 DataTransfer.dropEffect-Eigenschaft steuert das Feedback (typischerweise visuell), das dem Benutzer während einer Drag-and-Drop-Operation gegeben wird. Dies beeinflusst, welcher Cursor beim Ziehen angezeigt wird. Zum Beispiel kann der Browser-Cursor dem Benutzer anzeigen, welche Art von Aktion erfolgen wird, wenn er über ein Zieldrop-Element schwebt.

Wenn das DataTransfer-Objekt erstellt wird, ist dropEffect auf einen String-Wert gesetzt. Beim Abfragen wird der aktuelle Wert zurückgegeben. Beim Setzen wird, wenn der neue Wert einer der unten aufgeführten Werte ist, der aktuelle Wert der Eigenschaft auf den neuen Wert gesetzt und andere Werte werden ignoriert.

Für die dragenter- und dragover-Ereignisse wird dropEffect basierend auf der vom Benutzer angeforderten Aktion initialisiert. Wie dies bestimmt wird, ist plattformspezifisch, aber typischerweise kann der Benutzer durch Drücken von Modifikatortasten wie der Alt-Taste die gewünschte Aktion anpassen. Innerhalb von Ereignisbehandlern für dragenter- und dragover-Ereignisse sollte dropEffect modifiziert werden, wenn eine andere Aktion gewünscht wird als die vom Benutzer angeforderte.

Für die drop- und dragend-Ereignisse wird dropEffect auf die gewünschte Aktion gesetzt, die den Wert dropEffect hatte nach dem letzten dragenter- oder dragover-Ereignis. In einem dragend-Ereignis sollte beispielsweise, wenn das gewünschte dropEffect "move" ist, die gezogenen Daten aus der Quelle entfernt werden.

Wert

Ein String, der die Drag-Operationseffekt darstellt. Die möglichen Werte sind:

copy: Eine Kopie des Ausgangselements wird am neuen Ort erstellt.
move: Ein Element wird an einen neuen Ort verschoben.
link: Eine Verknüpfung zur Quelle wird am neuen Ort erstellt.
none: Das Element darf nicht abgelegt werden.

Ein Zuweisen eines anderen Wertes zu dropEffect hat keinen Effekt und der alte Wert bleibt erhalten.

Beispiel

Dieses Beispiel zeigt die Verwendung der Eigenschaften dropEffect und effectAllowed.

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>

CSS

css

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

#source {
  color: blue;
  border: 1px solid black;
}

#target {
  border: 1px solid black;
}

JavaScript

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

source.addEventListener("dragstart", (ev) => {
  console.log(
    `dragStart: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
  );

  // 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", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
});

target.addEventListener("drop", (ev) => {
  console.log(
    `drop: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
  );
  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));
});

target.addEventListener("dragover", (ev) => {
  console.log(
    `dragOver: dropEffect = ${ev.dataTransfer.dropEffect} ; effectAllowed = ${ev.dataTransfer.effectAllowed}`,
  );
  ev.preventDefault();
  // Set the dropEffect to move
  ev.dataTransfer.dropEffect = "move";
});

Spezifikationen

Specification
HTML # dom-datatransfer-dropeffect-dev