:-moz-drag-over
Nicht standardisiert: Diese Funktion ist nicht standardisiert und befindet sich nicht auf dem Weg zur Standardisierung. Verwenden Sie sie nicht auf Produktionsseiten, die dem Web ausgesetzt sind: Sie funktioniert nicht für alle Benutzer. Es kann auch 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 selektiert, wenn ein dragover
-Ereignis auf diesem ausgelöst 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 Ziele für das Ablegen von Daten. Um ein Ablegen zu ermöglichen, muss das Standardverhalten durch Abbrechen der dragenter
- oder dragover
-Ereignisse (oder beider) unterbunden werden. In diesem Beispiel müssen wir nur das dragenter
-Ereignis abbrechen, da dies das erste Ereignis ist, das ausgelöst wird, wenn der Browser überprüft, ob ein Element als Ziel für das Ablegen geeignet ist. Für weitere Informationen lesen Sie Drag operations: Specifying drop targets.
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 Ziels für das Ablegen auf Rot, wenn das ziehbare Element den Ablagebereich überlagert.
#drop-target {
background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
background-color: red;
}
Ergebnis
Spezifikationen
Nicht Teil eines Standards.