événement ondragstart

Exemple

Exécuter un script JavaScript lorsque l'utilisateur commence à glisser un <p> élément:

Plus "Try it Yourself" - "Try it Yourself" exemples ci - dessous.

Définition et utilisation

L'événement ondragstart se produit lorsque l'utilisateur commence à faire glisser un élément ou d'une sélection de texte.

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

Support du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui soutient pleinement l'événement.

un événement
ondragstart	4.0	9.0	3.5	6.0	12,0

Syntaxe

En HTML:

< Essayez vous - même »

JavaScript:

object .ondragstart=function(){ Essayez vous - même »

En JavaScript, en utilisant la addEventListener() méthode:

object .addEventListener("dragstart", 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 »