Attribut d' événement HTML ondrag
Exemple
Exécutez un JavaScript lorsqu'un élément <p> est déplacé :
<p draggable="true" ondrag="myFunction(event)">Drag me!</p>
Définition et utilisation
L'attribut ondrag se déclenche lorsqu'un élément ou une sélection de texte est déplacé.
Le glisser-déposer est une fonctionnalité très courante en HTML5. C'est lorsque vous "saisissez" un objet et que vous le faites glisser vers un autre emplacement. Pour plus d'informations, consultez notre tutoriel HTML sur le glisser-déposer HTML5 .
Remarque : Pour rendre un élément déplaçable, utilisez l'attribut global HTML5 déplaçable .
Conseil : Les liens et les images sont déplaçables par défaut et n'ont pas besoin de l'attribut déplaçable.
De nombreux attributs d'événement sont utilisés et peuvent se produire aux différentes étapes d'une opération de glisser-déposer :
- Événements déclenchés sur la cible déplaçable (l'élément source) :
- ondragstart - se déclenche lorsque l'utilisateur commence à faire glisser un élément
- ondrag - se déclenche lorsqu'un élément est déplacé
- ondragend - se déclenche lorsque l'utilisateur a fini de faire glisser l'élément
- Événements déclenchés sur la cible de dépôt :
- ondragenter - se déclenche lorsque l'élément déplacé entre dans la cible de dépôt
- ondragover - se déclenche lorsque l'élément déplacé se trouve au-dessus de la cible de dépôt
- ondragleave - se déclenche lorsque l'élément déplacé quitte la cible de dépôt
- ondrop - se déclenche lorsque l'élément déplacé est déposé sur la cible de dépôt
Remarque : lors du déplacement d'un élément, l'événement ondrag se déclenche toutes les 350 millisecondes.
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge l'attribut d'événement.
Event Attribute | |||||
---|---|---|---|---|---|
ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntaxe
<element ondrag="script">
Valeurs d'attribut
Value | Description |
---|---|
script | The script to be run on ondrag |
Détails techniques
Balises HTML compatibles : | TOUS les éléments HTML |
---|
Pages connexes
Tutoriel HTML : Glisser-déposer HTML5
Référence HTML : attribut déplaçable HTML
Référence HTML DOM : événement ondrag
❮ Attributs d'événement HTML