Exemple
Exécuter un script JavaScript lorsqu'un <p> est traîné élément:
<p draggable="true" ondrag="myFunction(event)">Drag me!</p>
Essayez vous - même » Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.
Définition et utilisation
L'événement ondrag se produit lorsqu'une sélection ou élément de texte est en cours de déplacement.
Glisser-déposer est une caractéristique très courante en HTML5. Il est quand vous "grab" un objet et faites -le glisser vers un autre emplacement. Pour plus d' informations, consultez notre Tutoriel HTML sur HTML5 Drag and Drop .
Remarque: Pour un élément draggable, utilisez le global HTML5 draggable attribut.
Astuce: Liens et images sont draggable par défaut, et ne nécessitent pas l' draggable attribut.
Il y a beaucoup d'événements qui 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 (the source element) :
- ondragstart - se produit lorsque l'utilisateur commence à faire glisser un élément
- ondrag - se produit lorsqu'un élément est en cours de déplacement
- ondragend - se produit lorsque l'utilisateur a fini de glisser l'élément
- Événements déclenchés sur la cible de baisse:
- OnDragEnter - se produit lorsque l'élément entraîné pénètre dans la cible de dépôt
- ondragover - se produit lorsque l'élément entraîné est supérieure à la cible de dépôt
- OnDragLeave - se produit lorsque l'élément entraîné quitte la cible de dépôt
- ondrop - se produit lorsque l'élément entraîné est déposé sur la cible de dépôt
Note: Tout en faisant glisser un élément, l'événement se déclenche à chaque ondrag 350 millisecondes.
Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement l'événement.
un événement | |||||
---|---|---|---|---|---|
ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12,0 |
Syntaxe
En HTML:
< Essayez vous - même »
JavaScript:
object .ondrag=function(){ Essayez vous - même »
En JavaScript, en utilisant la addEventListener() méthode:
object .addEventListener("drag", myScript );
Essayez vous - même » Note: Le addEventListener() méthode est pas prise en charge dans Internet Explorer 8 et les versions antérieures.
Détails techniques
Bulles: | Oui |
---|---|
cancelable: | Oui |
Type d'événement: | DragEvent |
Pris en charge les balises HTML: | Tous les éléments HTML |
DOM Version: | Niveau 3 Évènements |
autres 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>
Essayez vous - même » Pages associées
Tutoriel HTML: HTML5 Drag and Drop
HTML Référence: HTML draggable Attribute
Objet de l' événement