:-moz-drag-over
Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.
La pseudo-classe CSS :-moz-drag-over permet de mettre en forme un élément lorsqu'un événement drag-over est appelé dessus.
Syntaxe
:-moz-drag-over {
/* ... */
}
Exemples
HTML
<div id="drop-target">
<p>Cible de dépôt</p>
</div>
<div draggable="true">
<p>Déplaçable</p>
</div>
JavaScript
La plupart des éléments ne sont pas des emplacements valides pour déposer des données. Pour autoriser un dépôt, vous devez donc empêcher le comportement par défaut en annulant les événements dragenter ou dragover (ou les deux).
Dans cet exemple, nous devons uniquement annuler l'événement dragenter, qui est le premier événement déclenché lorsque le navigateur évalue si un élément peut être une cible de dépôt.
Pour plus d'informations, consultez l'article Opérations de glissement.
const target = document.getElementById("drop-target");
/* événement dragenter déclenché sur la cible de dépôt */
target.addEventListener(
"dragenter",
(event) => {
// empêcher le comportement par défaut pour autoriser le dépôt
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;
}
Le CSS suivant change la couleur de la zone de dépôt en rouge lorsque l'élément déplaçable recouvre la zone de dépôt.
#drop-target {
background-color: cornflowerblue;
}
#drop-target:-moz-drag-over {
background-color: red;
}
Résultat
Spécifications
Cette pseudo-classe ne fait partie d'aucun standard.