HTMLElement: dragenter-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 dragenter-Ereignis wird ausgelöst, wenn ein gezogenes Element oder eine gezogene Textauswahl in ein gültiges Ablageziel eintritt. Das Zielobjekt ist die unmittelbare Benutzerauswahl (das Element, das der Benutzer direkt als Ablageziel angibt) oder das <body>-Element.

Dieses Ereignis kann abgebrochen werden und sich bis zu den Objekten Document und Window ausbreiten.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie ihn der Ereignisbehandlungseigenschaft der Schnittstelle zuweisen:

ondragenter = (event) => { }

In diesem unvollständigen Beispiel ist das Ablegen jedoch 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");
  }
});