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-Event wird ausgelöst, wenn ein gezogenes Element oder eine Textauswahl ein gültiges Zielgebiet erreicht. Das Zielobjekt ist die unmittelbare Benutzerselektion (das Element, das direkt vom Benutzer als Zielgebiet angegeben wird) oder das <body>-Element.

Dieses Event kann abgebrochen werden und kann bis zu den Objekten Document und Window propagieren.

Syntax

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

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

ondragenter = (event) => { }

Event-Typ

Ein DragEvent. Erbt von Event.

Event UIEvent MouseEvent DragEvent

Event-Eigenschaften

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

DragEvent.dataTransfer Schreibgeschützt

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

Beispiele

Stilgestaltung von Drop-Zonen 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 wieder loszulassen.

Wir hören auf das dragenter-Event, um dem anderen Container einen violetten Hintergrund zu geben, während sich das ziehbare Element darüber befindet, um anzuzeigen, dass das Element auf den Container fallen gelassen werden könnte.

In diesem Teilbeispiel haben wir jedoch das Fallenlassen noch nicht implementiert. Für ein vollständiges Beispiel von Drag and Drop, siehe die Seite für das drag-Event.

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