HTML attribut d'événement ondragover

L'attribut d'événement ondragover en HTML

L'attribut d'événement ondragover est utilisé pour définir une action à effectuer lorsqu'un élément est survolé par un élément en cours de glissement (drag). Cet événement est couramment utilisé en conjonction avec les fonctionnalités de glisser-déposer.

Syntaxe générale

La syntaxe générale de l'attribut ondragover est la suivante :

<element ondragover="maFonction(event)">

Vous devez remplacer maFonction par la fonction JavaScript que vous souhaitez exécuter lorsque l'événement ondragover est déclenché. L'objet event peut être utilisé pour accéder à des informations sur l'événement, telles que les coordonnées du curseur.

Paramètres

Aucun paramètre spécifique n'est requis pour l'événement ondragover. Cependant, vous pouvez utiliser l'objet event pour accéder à des informations utiles.

Valeurs possibles

Les valeurs possibles pour l'attribut ondragover sont des fonctions JavaScript qui seront exécutées lorsque l'événement se produit.

Exemples pratiques d'utilisation

Voici un exemple simple qui change la couleur de fond d'un élément lorsqu'il est survolé par un élément en cours de glissement :

Exemple : Copier le code

	<!DOCTYPE html>
<html lang="fr">
<head>
    <style>
        .zone-glissable {
            width: 200px;
            height: 200px;
            background-color: #eee;
            border: 2px dashed #ccc;
        }
    </style>
</head>
<body>

    <div class="zone-glissable" ondragover="changerCouleur(event)">
        Glissez-déposez un fichier ici
    </div>

    <script>
        function changerCouleur(event) {
            event.preventDefault();
            document.querySelector('.zone-glissable').style.backgroundColor = 'lightblue';
        }
    </script>

</body>
</html>

Dans ce code :
<div class="zone-glissable" ondragover="changerCouleur(event)"> : Crée une <div> avec la classe CSS zone-glissable. L'attribut ondragover spécifie la fonction JavaScript à exécuter lorsque l'événement de survol lors du glisser-déposer se produit.

onDragOver : C'est un événement qui se produit lorsqu'un élément est survolé par un élément en cours de glissement. "changerCouleur(event)" : Appelle la fonction JavaScript changerCouleur avec l'objet event en tant que paramètre lorsque l'événement de survol se produit.

Glissez-déposez ici : Texte à afficher à l'intérieur de la zone glissable.

function changerCouleur(event) : Définition de la fonction JavaScript appelée lors de l'événement ondragover. La fonction prend l'objet event en tant que paramètre.

event.preventDefault(); : Empêche le comportement par défaut de l'événement, ce qui est souvent nécessaire lors de la gestion des événements de glisser-déposer.

document.querySelector('.zone-glissable').style.backgroundColor = 'lightblue'; : Sélectionne l'élément avec la classe .zone-glissable et modifie sa couleur de fond en 'lightblue'.

Astuces et conseils d'utilisation

Utilisez la méthode preventDefault() pour annuler le comportement par défaut lors du survol, ce qui est souvent nécessaire pour activer certaines fonctionnalités de glisser-déposer.
Assurez-vous de bien comprendre les événements associés tels que ondragstart et ondrop pour gérer l'ensemble du processus de glisser-déposer de manière complète.

En suivant ce tutoriel, vous devriez maintenant avoir une compréhension de base de l'utilisation de l'attribut d'événement ondragover en HTML. N'hésitez pas à expérimenter davantage et à intégrer cet événement dans vos projets Web interactifs.