DataTransfer.dropEffect — Eigenschaft · JavaScript-Referenz

Signatur

DataTransfer.dropEffect

Beschreibung

Die Eigenschaft dropEffect eines DataTransfer-Objekts bestimmt, welches Feedback der Benutzer während einer Drag-and-Drop-Operation bekommt. Meistens ist das der Mauszeiger, etwa ein Pluszeichen beim Kopieren oder ein Verbotssymbol, wenn Ablegen nicht möglich ist. Außerdem legt sie fest, welche Operation beim Loslassen tatsächlich gemeldet wird.

Erlaubt sind die Zeichenketten "none", "copy", "move" und "link". Normalerweise setzt man den Wert in den Handlern für dragenter und dragover auf dem Ablageziel. Der gesetzte Wert muss zu effectAllowed passen, das die Drag-Quelle festgelegt hat. Andernfalls setzt der Browser den Effekt auf "none" und lässt kein Ablegen zu.

In den Ereignissen drop und dragend enthält dropEffect den zuletzt ausgehandelten Effekt. Im dragend-Handler der Quelle erkennt man daran, ob das Element verschoben wurde ("move") und entfernt werden muss, oder ob der Vorgang abgebrochen wurde ("none").

Parameter

Name	Typ	Default	Beschreibung
$value	"none" \| "copy" \| "move" \| "link"	abhängig von effectAllowed und Zusatztasten, oft "none" oder "move"	Zuweisbarer Wert. `copy`: Daten werden an das Ziel kopiert. `move`: Daten werden verschoben. `link`: Es wird eine Verknüpfung zur Quelle angelegt. `none`: Ablegen ist nicht erlaubt. Andere Werte ignoriert der Browser ohne Fehlermeldung.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Drop-Effekt als "none", "copy", "move" oder "link".

Beispiele

Ablageziel zeigt Kopier-Cursor an

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

zone.addEventListener('dragover', (event) => {
  // Ohne preventDefault() ist kein Drop möglich
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

zone.addEventListener('drop', (event) => {
  event.preventDefault();
  const text = event.dataTransfer.getData('text/plain');
  zone.textContent = `Kopiert: ${text}`;
  console.log(event.dataTransfer.dropEffect);
});

copy

Verschieben: Quelle entfernt Element nach erfolgreichem Drop

const item = document.querySelector('#item');
const list = document.querySelector('#ziel-liste');

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

list.addEventListener('dragover', (event) => {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
});

list.addEventListener('drop', (event) => {
  event.preventDefault();
  const id = event.dataTransfer.getData('text/plain');
  list.append(document.getElementById(id).cloneNode(true));
});

item.addEventListener('dragend', (event) => {
  // 'none' bedeutet: abgebrochen oder abgelehnt
  console.log('Ergebnis:', event.dataTransfer.dropEffect);
  if (event.dataTransfer.dropEffect === 'move') item.remove();
});

Ergebnis: move

Nur bestimmte Dateitypen annehmen

const upload = document.querySelector('#upload');

upload.addEventListener('dragover', (event) => {
  event.preventDefault();
  const items = [...event.dataTransfer.items];
  const nurBilder = items.length > 0 && items.every(
    (i) => i.kind === 'file' && i.type.startsWith('image/')
  );
  // Verbotssymbol für alles, was kein Bild ist
  event.dataTransfer.dropEffect = nurBilder ? 'copy' : 'none';
});

upload.addEventListener('drop', (event) => {
  event.preventDefault();
  if (event.dataTransfer.dropEffect === 'none') return;
  for (const file of event.dataTransfer.files) {
    console.log('Bild erhalten:', file.name);
  }
});

Bild erhalten: foto.png

// Wichtig · Fallstricke

preventDefault() nicht vergessen: Ruft man in dragover (und am besten auch in dragenter) nicht event.preventDefault() auf, bleibt das Ablegen blockiert, egal welcher dropEffect gesetzt ist.
Muss zu effectAllowed passen: Hat die Quelle zum Beispiel effectAllowed = "copy" gesetzt und das Ziel setzt dropEffect = "move", wird daraus "none".
Nur in dragenter und dragover wirkt eine Zuweisung. In dragstart, drop und dragend sollte man den Wert nur lesen.
Zusatztasten wie Strg/Alt (Windows) oder Option/Cmd (macOS) können den vom Browser vorgeschlagenen Effekt ändern, bevor das Skript ihn überschreibt.
Browser-Unterschiede: Ältere Chrome- und Safari-Versionen melden in dragend manchmal "none", obwohl der Drop erfolgreich war, vor allem bei Drags zwischen Fenstern oder Anwendungen. Zuverlässiger ist es, den Erfolg zusätzlich selbst zu speichern, etwa über ein Flag, das im drop-Handler gesetzt wird.
Auf Touch-Geräten wird die HTML-Drag-and-Drop-API nur eingeschränkt unterstützt (unter iOS erst ab Safari 11/15, je nach Kontext).

Siehe auch

DataTransfer DataTransfer.effectAllowed DataTransfer.getData() DataTransfer.setData() DragEvent