Attribut d'événement ondrag HTML

❮ Attributs d'événements HTML

Exemple

Exécutez un JavaScript lorsqu'un élément <p> est en cours de glisser :

<p draggable="true" ondrag="myFunction(event)">Glisse-moi !</p>
Essayez-le vous-même »

Définition et utilisation

L'attribut ondrag se déclenche lorsqu'un élément ou une sélection de texte est en cours de glissement.

Le glisser-déposer est une fonctionnalité très courante dans HTML5. C'est lorsque vous "attrapez" un objet et le déplacez à un autre endroit. Pour plus d'informations, consultez notre tutoriel HTML sur HTML5 Glisser et Déposer .

Remarque : Pour rendre un élément glissable, utilisez l'attribut global HTML5 draggable .

Astuce : Les liens et les images sont glissables par défaut et n'ont pas besoin de l'attribut draggable.

Il existe de nombreux attributs d'événements qui sont utilisés et peuvent se produire à différentes étapes d'une opération de glisser-déposer :

  • Événements déclenchés sur la cible glissable (l'élément source) :
    • ondragstart - se déclenche lorsque l'utilisateur commence à glisser un élément
    • ondrag - se déclenche lorsqu'un élément est en cours de glissement
    • ondragend - se déclenche lorsque l'utilisateur a fini de glisser l'élément

  • Événements déclenchés sur la cible de dépôt :
    • ondragenter - se déclenche lorsque l'élément glissé entre dans la cible de dépôt
    • ondragover - se déclenche lorsque l'élément glissé est au-dessus de la cible de dépôt
    • ondragleave - se déclenche lorsque l'élément glissé quitte la cible de dépôt
    • ondrop - se déclenche lorsque l'élément glissé est déposé sur la cible de dépôt

Remarque : Lors du glissement d'un élément, l'événement ondrag se déclenche toutes les 350 millisecondes.


Support des navigateurs

Les chiffres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge l'attribut d'événement.

Attribut d'événement
ondrag 4.0 9.0 9 3.1 12

Syntaxe

< élément ondrag=" script ">

Valeurs d'attribut

Valeur Description
script Le script à exécuter lors de l'événement ondrag

Détails techniques

Balises HTML prises en charge : TOUS les éléments HTML

Pages connexes

Tutoriel HTML : HTML5 Glisser et Déposer

Référence HTML : Attribut HTML draggable

Référence DOM HTML : Événement ondrag


❮ Attributs d'événements HTML