Événement ondrag
Exemple
Exécutez un JavaScript lorsqu'un élément <p> est déplacé :
<p draggable="true" ondrag="myFunction(event)">Drag me!</p>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
L'événement ondrag se produit 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 événements sont utilisés, et peuvent se produire, dans les 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 produit lorsque l'utilisateur commence à faire glisser un élément
- ondrag - se produit lorsqu'un élément est déplacé
- ondragend - se produit 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 produit lorsque l'élément déplacé entre dans la cible de dépôt
- ondragover - se produit lorsque l'élément déplacé se trouve au-dessus de la cible de dépôt
- ondragleave - se produit lorsque l'élément déplacé quitte la cible de dépôt
- ondrop - se produit 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'événement.
Event | |||||
---|---|---|---|---|---|
ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Syntaxe
En HTML :
<element ondrag="myScript">
En Javascript :
object.ondrag = function(){myScript};
En JavaScript, en utilisant la méthode addEventListener() :
object.addEventListener("drag", myScript);
Remarque : La méthode addEventListener() n'est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
Bulles: | Oui |
---|---|
Annulable : | Oui |
Type d'événement: | DragEvent |
Balises HTML compatibles : | Tous les éléments HTML |
Version DOM : | Événements de niveau 3 |
Plus d'exemples
Exemple
Une démonstration de TOUS les événements de glisser-déposer possibles :
<p draggable="true" id="dragtarget">Drag me!</p>
<div class="droptarget">Drop here!</div>
<script>
// Events fired on the drag target
document.addEventListener("dragstart", function(event) {
// The dataTransfer.setData() method sets the data type and the value of the dragged data
event.dataTransfer.setData("Text", event.target.id);
// Output some text when starting to drag the p element
document.getElementById("demo").innerHTML = "Started to drag the p element.";
// Change the opacity of the draggable element
event.target.style.opacity = "0.4";
});
// While dragging the p element, change the color of the output text
document.addEventListener("drag", function(event) {
document.getElementById("demo").style.color = "red";
});
// Output some text when finished dragging the p element and reset the opacity
document.addEventListener("dragend", function(event) {
document.getElementById("demo").innerHTML = "Finished dragging the p element.";
event.target.style.opacity = "1";
});
// Events fired on the drop target
// When the draggable p element enters the droptarget, change the DIVS's border style
document.addEventListener("dragenter", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "3px dotted red";
}
});
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element
document.addEventListener("dragover", function(event) {
event.preventDefault();
});
// When the draggable p element leaves the droptarget, reset the DIVS's border style
document.addEventListener("dragleave", function(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
}
});
/* On drop - Prevent the browser default handling of the data (default is open as link on drop)
Reset the color of the output text and DIV's border color
Get the dragged data with the dataTransfer.getData() method
The dragged data is the id of the dragged element ("drag1")
Append the dragged element into the drop element
*/
document.addEventListener("drop", function(event) {
event.preventDefault();
if ( event.target.className == "droptarget" ) {
document.getElementById("demo").style.color = "";
event.target.style.border = "";
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
});
</script>
Pages connexes
Tutoriel HTML : Glisser-déposer HTML5
Référence HTML : attribut déplaçable HTML