HTML attribut d'événement ondragend

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.