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 :

float

Spécifie si oui ou non une boîte doit flotter

Les couleurs en CSS3

CSS3 ajoute quelques nouvelles notations fonctionnelles pour définir des valeurs de couleur pour les éléments qui sont : rgba(), hsl(), hsla() et opecity.

padding

Définit toutes les propriétés de la marge intérieure dans une déclaration