HTML attribut d'événement

Définition Utilisation de l'attribut d'événement ondragleave en HTML

L'attribut ondragleave se déclenche lorsque un élément pouvant être déplacé (draggable) ou une sélection de texte quitte une cible de dépôt valide.

Les événements ondragenter et ondragleave peuvent aider l'utilisateur à comprendre qu'un élément pouvant être déplacé s'apprête à entrer ou à quitter une cible de dépôt. Cela peut être réalisé, par exemple, en définissant une couleur de fond lorsque l'élément déplaçable entre dans la cible de dépôt, et en supprimant la couleur lorsque l'élément est déplacé hors de la cible.

Le glisser-déposer est une fonctionnalité très courante en HTML5. Cela consiste à "attraper" un objet et à le déplacer vers un emplacement différent. Pour plus d'informations, consultez notre tutoriel HTML sur le glisser-déposer en HTML5.

Syntaxe générale :

<element ondragleave="maFonction(event)">

Paramètres :

event : L'objet event contenant des informations sur l'événement de glisser-déposer.

Valeurs possibles :

La valeur de l'attribut ondragleave doit être une fonction JavaScript qui sera exécutée lorsque l'événement se produit.

Exemples pratiques d'utilisation :

Le code de cet exemple peut être utilisé pour créer une zone de dépôt pour les fichiers. Lorsque l'utilisateur déplace un fichier hors de la zone de dépôt, le message "Élément quitté" est affiché.

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>Tutoriel : ondragleave en HTML</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .drop-zone {
            border: 2px dashed #ccc;
            padding: 20px;
            text-align: center;
            cursor: pointer;
        }
        .highlight {
            border-color: #4CAF50;
        }
    </style>
</head>
<body>

    <div class="drop-zone" ondragleave="handleDragLeave(event)">
    <p>Faites glisser un fichier ici</p>
</div>

<script>
    function handleDragLeave(event) {
        event.preventDefault();
        var dropZone = document.querySelector('.drop-zone');
        dropZone.classList.remove('highlight');
        
        // Utilisation d'une balise <p> pour afficher le message
        var messageParagraph = document.createElement('p');
        messageParagraph.textContent = 'Élément quitté';
        dropZone.appendChild(messageParagraph);
    }
</script>


</body>
</html>

Explication du code HTML

La balise div définit la zone de dépôt. Elle a la classe drop-zone. L'attribut ondragleave est utilisé pour lier la fonction handleDragLeave() à l'événement ondragleave.

Explication du code JavaScript

La fonction handleDragLeave() est appelée lorsque l'événement ondragleave est déclenché. Elle effectue les actions suivantes :

Elle empêche la propagation de l'événement en utilisant la méthode preventDefault().
Elle récupère la zone de dépôt en utilisant la méthode querySelector().
Elle supprime la classe highlight de la zone de dépôt. Cette classe est utilisée pour mettre en évidence la zone de dépôt lorsque l'utilisateur la survole.
Elle crée un nouveau paragraphe pour afficher le message.
Elle ajoute le paragraphe à la zone de dépôt.
Résultat du code

Lorsque l'utilisateur déplace un élément hors de la zone de dépôt, la fonction handleDragLeave() est appelée. La classe highlight est supprimée de la zone de dépôt, et un paragraphe avec le message "Élément quitté" est ajouté à la zone de dépôt.

Astuces et conseils d'utilisation :

Assurez-vous d'annuler l'événement par défaut avec event.preventDefault() pour permettre une utilisation correcte de l'événement ondragleave.
Vous pouvez styliser votre zone de dépôt en ajoutant ou en supprimant des classes lors des événements de glisser-déposer pour fournir des indications visuelles aux utilisateurs.