:-moz-drag-over

Kein Standard: Diese Funktion ist nicht standardisiert und befindet sich nicht im Standardisierungsprozess. Verwenden Sie sie nicht auf Produktionsseiten, die auf das Web ausgerichtet sind: Sie wird nicht für alle Benutzer funktionieren. Außerdem kann es große Inkompatibilitäten zwischen Implementierungen geben und das Verhalten kann sich in Zukunft ändern.

Die :-moz-drag-over CSS Pseudoklasse ist eine Mozilla-Erweiterung, die ein Element übereinstimmt, wenn ein dragover-Ereignis darauf aufgerufen wird.

Syntax

css
:-moz-drag-over {
  /* ... */
}

Beispiele

HTML

html
<div id="drop-target">
  <p>Drop target</p>
</div>

<div draggable="true">
  <p>Draggable</p>
</div>

JavaScript

Die meisten Elemente sind keine gültigen Orte zum Ablegen von Daten. Um das Ablegen zu ermöglichen, müssen Sie das Standardverhalten durch das Verhindern von dragenter oder dragover (oder beiden) Ereignissen verhindern. In diesem Beispiel müssen wir nur das dragenter-Ereignis verhindern, welches das erste Ereignis ist, das ausgelöst wird, wenn der Browser prüft, ob ein Element ein Drop-Ziel sein kann. Für weitere Informationen siehe Drag and Drop-Operationen: Angabe von Drop-Zielen.

js
const target = document.getElementById("drop-target");
/* dragenter event fired on the drop target */
target.addEventListener(
  "dragenter",
  (event) => {
    // prevent default to allow drop
    event.preventDefault();
  },
  false,
);

CSS

css
body {
  font-family: arial;
}
div {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 2px dotted black;
  background-color: aquamarine;
  margin: 1rem;
}
p {
  padding: 1rem;
}

Das folgende CSS ändert die Farbe des Drop-Ziels zu Rot, wenn das Ziehelement den Ablagebereich überlagert.

css
#drop-target {
  background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
  background-color: red;
}

Ergebnis

Spezifikationen

Nicht Teil eines Standards.

Siehe auch