HTMLElement: dragleave-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das dragleave-Ereignis wird ausgelöst, wenn ein gezogenes Element oder eine gezogene Textauswahl ein gültiges Ablageziel verlässt.

Dieses Ereignis kann nicht abgebrochen werden und kann bis zu den Objekten Document und Window aufsteigen.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("dragleave", (event) => { })

Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle einen Wert zuweisen:

ondragleave = (event) => { }

Beispiele

Stile der Ablagezone bei dragleave zurücksetzen

In diesem Beispiel befindet sich ein ziehbares Element innerhalb eines Containers. Versuchen Sie, das Element zu greifen, es über den anderen Container zu ziehen und dort loszulassen.

Solange sich das ziehbare Element über dem anderen Container befindet, geben wir diesem einen violetten Hintergrund. Dadurch wird angezeigt, dass das Element auf dem Container abgelegt werden könnte. Wir reagieren auf das dragleave-Ereignis, um den Hintergrund des Containers zurückzusetzen, wenn das ziehbare Element den Container verlässt.

In diesem unvollständigen Beispiel haben wir das Ablegen allerdings nicht implementiert. Ein vollständiges Drag-and-Drop-Beispiel finden Sie auf der Seite zum drag-Ereignis.

HTML

html

<div class="dropzone">
  <div id="draggable" draggable="true">This div is draggable</div>
</div>
<div class="dropzone" id="drop-target"></div>

CSS

css

body {
  /* Prevent the user from selecting text in the example */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}

JavaScript

const target = document.getElementById("drop-target");
target.addEventListener("dragenter", (event) => {
  // highlight potential drop target when the draggable element enters it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // reset background of potential drop target when the draggable element leaves it
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});