HTMLElement: dragend — Ereignis · JavaScript-Referenz

Signatur

element.addEventListener("dragend", handler)

Beschreibung

Das dragend-Ereignis gehört zur HTML Drag and Drop API. Es wird immer am Quellelement ausgelöst, also an dem Element, bei dem vorher dragstart ausgelöst wurde, und nicht am Ablageziel. Es kommt als letztes Ereignis einer Ziehoperation, nach einem eventuellen drop am Ziel.

Typische Aufgaben sind Aufräumarbeiten: CSS-Klassen wie .dragging entfernen, Platzhalter ausblenden, die Deckkraft zurücksetzen oder globale Zustände zurücksetzen. Mit event.dataTransfer.dropEffect lässt sich prüfen, ob die Operation erfolgreich war ("move", "copy", "link") oder abgebrochen wurde ("none"). Bei einem erfolgreichen "move" entfernt man zum Beispiel das Original.

Der Handler erhält ein DragEvent, das von MouseEvent erbt. Das Ereignis steigt im DOM auf (bubbles), ist aber nicht abbrechbar (cancelable: false). Man kann es per addEventListener("dragend", …) oder über die Eigenschaft ondragend registrieren.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der Ereignisname `"dragend"`.
$handler Pflicht	(event: DragEvent) => void		Callback-Funktion. Sie erhält ein `DragEvent` mit `dataTransfer`, `clientX`/`clientY` usw.
$options	boolean \| AddEventListenerOptions	false	Optionen wie `once`, `capture`, `passive` oder `signal`.

Rückgabewert

Typ

void

Beschreibung

addEventListener gibt nichts zurück. Der Handler bekommt ein DragEvent-Objekt.

Beispiele

Hervorhebung nach dem Ziehen entfernen

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

card.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', card.id);
  card.classList.add('dragging');
});

card.addEventListener('dragend', () => {
  // Wird immer ausgelöst, egal ob abgelegt oder abgebrochen
  card.classList.remove('dragging');
  console.log('Ziehen beendet');
});

Ziehen beendet

Erfolg oder Abbruch über dropEffect erkennen

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

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

item.addEventListener('dragend', (event) => {
  const effect = event.dataTransfer.dropEffect;
  if (effect === 'move') {
    item.remove(); // Original entfernen, das Ziel hat eine Kopie eingefügt
    console.log('Verschoben');
  } else {
    console.log('Abgebrochen (dropEffect: ' + effect + ')');
  }
});

// Ablageziel
const list = document.querySelector('#done-list');
list.addEventListener('dragover', (e) => e.preventDefault());
list.addEventListener('drop', (e) => {
  e.preventDefault();
  e.dataTransfer.dropEffect = 'move';
  const li = document.createElement('li');
  li.textContent = e.dataTransfer.getData('text/plain');
  list.append(li);
});

Verschoben // oder bei Escape: Abgebrochen (dropEffect: none)

Delegation per on-Property und Entfernen des Listeners

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

// dragend steigt auf, deshalb reicht ein Handler am Container
board.ondragend = (event) => {
  event.target.style.opacity = '';
  console.log('Beendet:', event.target.id);
};

// Alternativ mit addEventListener und späterem Entfernen
const onDragEnd = (event) => {
  event.target.classList.remove('dragging');
};
board.addEventListener('dragend', onDragEnd);

// Später, zum Beispiel beim Abbau der Komponente:
board.removeEventListener('dragend', onDragEnd);
board.ondragend = null;

Beendet: task-3

// Wichtig · Fallstricke

Quelle, nicht Ziel: dragend wird am gezogenen Element ausgelöst. Für das Ablageziel ist das Ereignis drop zuständig.
Abbruch erkennen: Bei Escape oder beim Loslassen außerhalb eines gültigen Ziels ist dataTransfer.dropEffect gleich "none". Einige ältere Browser liefern hier teilweise unzuverlässige Werte. Wer sichergehen will, setzt beim drop zusätzlich ein eigenes Flag.
Kein Datenzugriff: In dragend ist der Datenspeicher geschützt. getData() liefert dort in der Regel einen leeren String.
Element aus dem DOM entfernt: Wird das Quellelement während des Ziehens aus dem DOM genommen, wird dragend dort nicht zuverlässig ausgelöst. Deshalb erst in dragend entfernen.
Dateien vom Betriebssystem: Zieht man Dateien vom Desktop in den Browser, gibt es kein Quellelement im Dokument und damit kein dragend.
Touch-Geräte: Natives Drag and Drop per Touch wird auf Mobilgeräten erst in neueren Versionen unterstützt (zum Beispiel iOS Safari ab 15, Chrome Android). Für ältere Geräte braucht man Pointer-Events oder Polyfills.
Die Koordinaten (clientX/clientY) in dragend sind in Firefox oft 0. Man sollte sich nicht darauf verlassen.

Siehe auch

HTMLElement: dragstart HTMLElement: drag HTMLElement: drop HTMLElement: dragover DragEvent DataTransfer.dropEffect HTMLElement.draggable