HTMLElement: dragenter-Event

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 ein gültiges Ziel betritt. Das Zielobjekt ist die unmittelbare Benutzerauswahl (das Element, das direkt vom Benutzer als Abwurfziel angezeigt wird) oder das <body>-Element.

Dieses Ereignis ist abfangbar und kann bis zu den Objekten Document und Window propagieren.

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

Neben den unten aufgeführten Eigenschaften sind auch 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

Drop-Zonen beim Dragenter stylen

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

Wir hören auf das dragenter-Ereignis, um dem anderen Container einen violetten Hintergrund zu geben, während das ziehbare Element darüber ist, 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 zum 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 Standard
# ix-handler-ondragenter
HTML Standard
# event-dnd-dragenter

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch