oujood.com

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

Découvrez comment utiliser l'attribut d'événement ondragstart en HTML. Apprenez la définition, la syntaxe générale, les paramètres, les valeurs possibles, et explorez des exemples pratiques d'utilisation. Obtenez des astuces et des conseils pour améliorer vos fonctionnalités de glisser-déposer sur votre site web

chercher |

L'attribut d'événement ondragstart en HTML: définition et utilisation

L'attribut d'événement ondragstart en HTML est utilisé pour définir une fonction JavaScript qui sera exécutée lorsque l'utilisateur commence à faire glisser un élément (drag-and-drop).

Définition

L'événement ondragstart se déclenche lorsque l'utilisateur commence à faire glisser un élément.

Utilisation

Pour utiliser l'attribut ondragstart, vous devez le définir sur un élément HTML, en spécifiant une fonction JavaScript à exécuter lorsque le glissement commence.

Syntaxe générale

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

Paramètres

L'événement ondragstart passe un objet d'événement en tant que paramètre à la fonction spécifiée. Cet objet contient des informations sur l'événement, telles que la position du curseur, l'élément glissé, etc.

Valeurs Possibles

La valeur de l'attribut ondragstart doit être une fonction JavaScript valide.

Exemples pratiques d'utilisation

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 sur l'attribut d'événement ondragstart en HTML</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
    </style>
</head>
<body>

    <h1>Tutoriel sur l'attribut d'événement ondragstart en HTML</h1>

    <script>
        function handleDragStart(event) {
            // Sélectionner l'élément <p> pour afficher le message
            var messageElement = document.getElementById("message");
            
            // Afficher le message dans l'élément <p>
            messageElement.innerHTML = "Le glissement a commencé !";

            // Ajouter ici le code spécifique au glissement
        }
    </script>

    <!-- Élément <p> pour afficher le message -->
    <p id="message"></p>

    <!-- Élément à glisser -->
    <div ondragstart="handleDragStart(event)" draggable="true">Élément à glisser</div>

</body>
</html>

Astuces et conseils d'utilisation

  • Assurez-vous de définir l'attribut draggable="true" sur les éléments que vous souhaitez rendre glissables.
  • Utilisez l'objet d'événement pour accéder aux informations liées au glissement, telles que l'élément glissé ou la position du curseur.
  • Explorez les autres événements liés au glissement, tels que ondrag, ondragenter, ondragleave, et ondragend.

Appui de navigateur

Internet Explorer FirefoxOpera Google ChromeSafari
L'attribut d'événement ondragstart est pris en charge dans tous les principaux navigateurs.

VOIR AUSSI NOTRE TUTORIEl HTML5 DRAG AND DROP

 Retour à la Liste attribut d'événement 

    
Accueil du site




Voir aussi nos tutoriel :

La fonction chr, chr()

Retourne un caractère partir de son code ASCII

Elément XSLT xsl apply templates

Elément XSLT xsl apply templates

PHP les erreurs les plus courantes

PHP les erreurs les plus courantes