oujood.com

Tutoriel sur l'attribut ondragend en HTML

Découvrez des tutoriels informatiques sur l'attribut d'événement ondragend, astuces et conseils pour améliorer vos compétences en programmation et optimiser votre expérience

chercher |

L'attribut ondragend en HTML : définition

L'attribut d'événement ondragend est utilisé pour définir une action à effectuer lorsqu'un élément est relâché après avoir été glissé (dragged).

Syntaxe générale :

<element ondragend="maFonction(event)">

Paramètres :

  • event : L'objet d'événement qui contient des informations sur l'événement dragend.

Valeurs possibles :

L'attribut ondragend peut prendre une référence à une fonction JavaScript qui sera exécutée lorsque l'événement se produit.

Exemples pratiques d'utilisation :

Exemple d'utilisation complet de l'attribut d'événement ondragend en HTML, avec un script JavaScript qui illustre son fonctionnement. Ce script simple modifie la couleur de fond de l'élément glissé une fois qu'il a été relâché.

Exemple :       Copier le code

	<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple d'utilisation de l'attribut ondragend</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
        }
        .draggable {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 20px;
            cursor: move;
        }
    </style>
</head>
<body>

    <h1>Exemple d'utilisation de l'attribut <code>ondragend</code></h1>

    <div class="draggable" draggable="true" ondragend="handleDragEnd(event)">Glissez-moi!</div>

    <script>
        function handleDragEnd(event) {
            // Modifier la couleur de fond après le relâchement de l'élément
            event.target.style.backgroundColor = 'lightgreen';
        }
    </script>

</body>
</html>

Dans cet exemple :

Un élément 'div' est rendu draggable en utilisant l'attribut draggable="true".
L'attribut ondragend est défini pour cet élément, appelant la fonction handleDragEnd(event) lorsque l'élément est relâché après avoir été glissé.
La fonction handleDragEnd(event) est définie dans le script JavaScript. Elle modifie la couleur de fond de l'élément glissé à "lightgreen" lorsqu'il est relâché.
N'hésitez pas à tester cet exemple dans un navigateur web pour voir l'effet du changement de couleur après le glisser-déposer.

Astuces et conseils d'utilisation :

  • Assurez-vous que l'élément est défini comme draggable="true" pour permettre le glisser-déposer.
  • Utilisez les propriétés de l'objet event pour obtenir des informations supplémentaires sur l'événement.

En conclusion, l'attribut ondragend est essentiel pour gérer les actions après le relâchement d'un élément déplacé. En comprenant sa syntaxe, ses paramètres et ses valeurs possibles, vous pouvez créer des expériences utilisateur enrichissantes avec le glisser-déposer.

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 :

Balise body

Définit le corps du document

fonction strpbrk, strpbrk

Recherche une chaîne de caractères dans un ensemble de caractères

La méthode Json parse

La méthode json parse analyse une chaîne JSON et construit la valeur ou l'objet JavaScript décrit par la chaîne.