HTMLElement: dragleave-Event

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

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

ondragleave = (event) => {};

Ein DragEvent. Erbt von Event.

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

DragEvent.dataTransfer Nur lesbar

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

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

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

In diesem teilweisen Beispiel 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

<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

• Andere Drag-and-Drop-Ereignisse:

  • drag
  • dragstart
  • dragend
  • dragover
  • dragenter
  • drop