oujood.com

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

Découvrez comment utiliser l'attribut d'événement ondrop 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 HTML onDrop : Définition

L'attribut d'événement onDrop est utilisé dans HTML pour détecter lorsque l'utilisateur dépose quelque chose sur un élément, généralement un élément avec l'attribut draggable activé.

Syntaxe générale

La syntaxe de base pour l'utilisation de l'attribut onDrop est la suivante :

             <element ondrop="maFonction(event)">Contenu de l'élément</element>
        

Vous pouvez attacher une fonction JavaScript à l'événement onDrop, qui sera déclenchée lorsque l'utilisateur relâche l'élément qu'il a fait glisser.

Paramètres

Lorsque la fonction spécifiée est appelée, un objet event est automatiquement passé en tant que paramètre. Cet objet contient des informations sur l'événement de dépôt, telles que la position du curseur, les éléments impliqués, etc.

Exemple pratique

Cet exemple montre comment créer une zone de dépôt qui accepte du texte glissé et met à jour son contenu en conséquence.

Exemple :       Copier le code

                <div ondragover="allowDrop(event)" ondrop="drop(event)">Zone de dépôt</div>

                <script>
                    function allowDrop(event) {
                        event.preventDefault();
                    }

                    function drop(event) {
                        event.preventDefault();
                        var data = event.dataTransfer.getData("text");
                        event.target.innerText = data;
                    }
                </script>
        

Explications du code :

La balise <div> est utilisée comme zone de dépôt avec deux attributs d'événement : ondragover et ondrop.

L'événement ondragover est associé à la fonction allowDrop(event), qui appelle event.preventDefault() pour permettre le dépôt d'éléments. Cela est nécessaire pour indiquer au navigateur que l'élément peut accepter le glissement d'éléments.

L'événement ondrop est associé à la fonction drop(event). Lorsque l'utilisateur relâche l'élément qu'il a fait glisser, cette fonction est appelée.

La fonction drop(event) commence par appeler event.preventDefault() pour empêcher le comportement par défaut du navigateur lié au dépôt.

Ensuite, elle utilise event.dataTransfer.getData("text") pour récupérer les données (le texte) de l'élément glissé.

Enfin, elle utilise event.target.innerText = data; pour mettre à jour le contenu textuel de la zone de dépôt avec le texte récupéré.

En résumé, cet exemple crée une zone de dépôt où l'utilisateur peut glisser du texte. Lorsque le texte est déposé, la zone de dépôt affiche le texte déposé. Les fonctions allowDrop et drop sont utilisées pour gérer les événements de survol et de dépôt, respectivement.

Astuces et conseils d'utilisation

  • Assurez-vous que l'élément sur lequel vous appliquez l'événement onDrop a l'attribut draggable="true" activé.
  • Gardez à l'esprit que l'événement onDrop doit être accompagné d'autres événements tels que ondragover pour spécifier le comportement pendant le glissement.
  • Utilisez l'objet event.dataTransfer pour accéder aux données qui ont été déposées.

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 :

Formats  médias de Windows

Formats  médias de Windows
Ce chapitre décrit les nouveaux formats Windows Media.

Balise table

Définit une table

fonction hebrev, hebrev

Convertit un texte logique hébreux en texte visuel