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

Dieses Ereignis kann abgebrochen werden und kann zum Document und Window-Objekt hochblasen.

Syntax

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

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

ondragenter = (event) => { }

Ereignistyp

Ein DragEvent. Erbt von Event.

Event UIEvent MouseEvent DragEvent

Ereigniseigenschaften

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

DragEvent.dataTransfer Schreibgeschützt

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

Beispiele

Styling von Ziehzonen bei dragenter

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 lauschen auf das dragenter-Ereignis, um dem anderen Container einen violetten Hintergrund zu geben, während sich das ziehbare Element über ihm befindet, um zu signalisieren, dass das ziehbare Element in den Container abgelegt werden könnte.

In diesem Teilausschnitt haben wir jedoch das Ablegen nicht implementiert: Für ein vollständiges Beispiel zu Drag and Drop sehen Sie sich die Seite zum drag-Ereignis an.

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-ondragenter
HTML
# event-dnd-dragenter

Browser-Kompatibilität

Siehe auch