HTMLElement: dragleave-Ereignis

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.

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

Dieses Ereignis ist nicht abbruchbar und kann bis zum Document- und Window-Objekt hochblasen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignisbehandler-Eigenschaft.

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

ondragleave = (event) => { }

Ereignistyp

Ein DragEvent. Erbt von Event.

Event UIEvent MouseEvent DragEvent

Ereigniseigenschaften

Zusätzlich zu den unten aufgeführten Eigenschaften sind die Eigenschaften der Elternschnittstelle, Event, verfügbar.

DragEvent.dataTransfer Schreibgeschützt

Die Daten, die während einer Drag-and-Drop-Interaktion übertragen werden.

Beispiele

Rücksetzen der Stile von Ablagezonen bei dragleave

In diesem Beispiel haben wir ein ziehbares Element in einem Container. Versuchen Sie, das Element zu greifen, es über den anderen Container zu ziehen und freizugeben.

Wir geben dem anderen Container einen lila Hintergrund, während sich das ziehbare Element darüber befindet, um anzuzeigen, dass es auf den Container fallen gelassen werden könnte. Wir hören auf das dragleave-Ereignis, um den Containerhintergrund zurückzusetzen, wenn das ziehbare Element vom Container weggezogen wird.

In diesem Teilsbeispiel haben wir jedoch das Ablegen nicht implementiert: Für ein vollständiges Beispiel für Drag and Drop siehe die Seite für das 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

js
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");
  }
});

Ergebnis

Spezifikationen

Specification
HTML
# ix-handler-ondragleave
HTML
# event-dnd-dragleave

Browser-Kompatibilität

Siehe auch