HTML attribut d'événement ondragover ondrop

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.