Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
:-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.
Lapseudo-classeCSS:-moz-drag-over permet de mettre en forme un élément lorsqu'un événementdrag-over est appelé dessus.
Syntaxe
:-moz-drag-over { /* ... */}Exemples
HTML
<div> <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énementsdragenter oudragover (ou les deux).Dans cet exemple, nous devons uniquement annuler l'événementdragenter, 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'articleOpé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.