oujood.com

Tutoriel sur l'attribut d'événement ondragover en HTML

Découvrez comment utiliser l'attribut d'événement ondragover en HTML. Ce tutoriel vous guide à travers la définition, la syntaxe, les paramètres, les valeurs possibles, des exemples pratiques, et des astuces pour améliorer l'expérience de glisser-déposer dans vos projets Web.

chercher |

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.

Appui de navigateur

Internet Explorer FirefoxOpera Google ChromeSafari
Cet attribut d'événement est pris en charge dans tous les principaux navigateurs.


 Retour à la Liste attribut d'événement 

    
Accueil du site




Voir aussi nos tutoriel :

min-height

Définit la hauteur minimale d'un élément

background-position

Définit la position de départ d'une image de fond

fonction crc32

Calcule la somme de contrôle CRC32