DataTransfer.effectAllowed — Eigenschaft · JavaScript-Referenz

Signatur

DataTransfer.effectAllowed

Beschreibung

Die Eigenschaft effectAllowed des DataTransfer-Interfaces bestimmt, welche Operationen die Quelle einer Ziehoperation zulässt. Sie wird typischerweise im dragstart-Handler gesetzt. Das Ziel wählt dann über dropEffect (in dragenter/dragover) eine konkrete Operation aus, die zu den erlaubten Effekten passen muss. Sonst lehnt der Browser den Drop ab.

Gültige Werte sind "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all" und "uninitialized". Wird die Eigenschaft nie gesetzt, lautet ihr Wert "uninitialized". Der Browser behandelt das dann wie "all", wobei Standardwerte je nach gezogenem Element gelten können (Links etwa "copyLink"/"all").

Die Eigenschaft wird genutzt, um dem Nutzer über den Mauszeiger passendes Feedback zu geben (Kopier-, Verschiebe- oder Verknüpfungssymbol) und um zu verhindern, dass ein Element zum Beispiel nur kopiert statt verschoben wird. Am Ende einer Ziehoperation lässt sich im dragend-Handler über dropEffect herausfinden, welche Operation tatsächlich ausgeführt wurde.

Rückgabewert

Typ

Beschreibung

Ein String mit den erlaubten Effekten. Beim Setzen werden ungültige Werte stillschweigend ignoriert, der bisherige Wert bleibt dann erhalten.

Beispiele

Nur Verschieben erlauben (dragstart)

const card = document.querySelector('#card');
card.draggable = true;

card.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', card.id);
  // Quelle erlaubt ausschließlich Verschieben
  event.dataTransfer.effectAllowed = 'move';
  console.log(event.dataTransfer.effectAllowed);
});

move

Ziel wählt passenden dropEffect

const zone = document.querySelector('#dropzone');

zone.addEventListener('dragover', (event) => {
  event.preventDefault(); // Drop überhaupt erst zulassen
  const allowed = event.dataTransfer.effectAllowed;
  // Bei gedrückter Strg-Taste kopieren, falls erlaubt
  if (event.ctrlKey && /copy|all|uninitialized/i.test(allowed)) {
    event.dataTransfer.dropEffect = 'copy';
  } else if (/move|all|uninitialized/i.test(allowed)) {
    event.dataTransfer.dropEffect = 'move';
  } else {
    event.dataTransfer.dropEffect = 'none';
  }
});

zone.addEventListener('drop', (event) => {
  event.preventDefault();
  const id = event.dataTransfer.getData('text/plain');
  const el = document.getElementById(id);
  zone.append(event.dataTransfer.dropEffect === 'copy' ? el.cloneNode(true) : el);
});

Kopieren oder Verschieben erlauben und Ergebnis auswerten

const item = document.querySelector('.item');

item.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', item.textContent);
  event.dataTransfer.effectAllowed = 'copyMove';
});

item.addEventListener('dragend', (event) => {
  // Welche Operation wurde tatsächlich ausgeführt?
  console.log('Ergebnis:', event.dataTransfer.dropEffect);
  if (event.dataTransfer.dropEffect === 'move') {
    item.remove();
  }
});

Ergebnis: move

// Wichtig · Fallstricke

Nur im dragstart-Handler schreibbar: In anderen Drag-Events ist das DataTransfer-Objekt geschützt; Zuweisungen dort haben keine Wirkung (Lesen geht aber).
Ungültige Werte (z. B. "Move" in anderer Schreibweise oder "copymove") werden ohne Fehlermeldung ignoriert. Auf die genaue Schreibweise im camelCase achten: "copyMove", "linkMove", "copyLink".
Passt dropEffect des Ziels nicht zu effectAllowed, wird der Drop verweigert und drop nicht ausgelöst; in dragend steht dann dropEffect === "none".
Ohne event.preventDefault() in dragover (und dragenter) nimmt ein Element überhaupt keinen Drop an, egal welcher Effekt erlaubt ist.
Bei Dateien, die aus dem Betriebssystem hereingezogen werden, legt das System bzw. der Browser effectAllowed fest. Der Wert hängt dann von Plattform und Browser ab.
Die HTML5-Drag-and-Drop-API funktioniert auf Touch-Geräten nur eingeschränkt (auf iOS erst ab Safari 15 zuverlässig). Für mobile Oberflächen eventuell auf Pointer Events ausweichen.

Siehe auch

DataTransfer DataTransfer.dropEffect DataTransfer.setData() DataTransfer.getData() DragEvent