:-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
:-moz-drag-over {
/* ... */
}
Beispiele
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.
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
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.
#drop-target {
background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
background-color: red;
}
Ergebnis
Spezifikationen
Nicht Teil eines Standards.