HTMLElement: dragleave-Ereignis

Syntax

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

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

ondragleave = (event) => { }

Ereignistyp

Ein DragEvent. Erbt von Event.

Ereigniseigenschaften

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

DragEvent.dataTransfer Schreibgeschützt

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

Beispiele

Zurücksetzen der Stilwahl des Zielbereichs bei dragleave

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

Wir geben dem anderen Container einen violetten Hintergrund, während sich das ziehbare Element darüber befindet, um anzuzeigen, dass es darauf abgelegt werden könnte. Wir hören auf das dragleave-Ereignis, um den Hintergrund des Containers zurückzusetzen, wenn das ziehbare Element aus dem Container gezogen wird.

Allerdings haben wir in diesem unvollständigen Beispiel das Ablegen nicht implementiert: Für ein vollständiges Beispiel von Drag-and-Drop, siehe die Seite für das drag-Ereignis.

HTML

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

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere Drag-and-Drop-Ereignisse:
  • drag
  • dragstart
  • dragend
  • dragover
  • dragenter
  • drop