HTML5 Le glisser-déposer (Drag and Drop) fait partie de la norme HTML5.

Le glisser-déposer (Drag and drop) est une fonctionnalité courante, qui consiste à saisir un objet et à le faire glisser vers un autre emplacement.

permettra àexample.comde faire glisser les icônes dans une zone rectangulaire.

Glisser-déposer

Le glisser-déposer est une fonctionnalité courante, permettant de saisir des objets et de les faire glisser vers un autre emplacement.

Dans HTML5, le glissement est une fonctionnalité standard, permettant à n'importe quel élément d'être glissé.

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9+, Firefox, Opera, Chrome et Safari prennent en charge le glissement.

Remarque :Safari 5.1.2 ne prend pas en charge le glissement.

Exemple de glisser-déposer HTML5

L'exemple suivant est un exemple simple de glisser-déposer :

Exemple

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tutoriel d'exemple (example.com)</title> <style type="text/css"> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>Faites glisser l'image example.com dans une boîte rectangulaire :</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>

Essayez-le »

Cela peut sembler compliqué, mais nous pouvons étudier séparément les différentes parties des événements de glisser-déposer.

Rendez l'élément déplaçable

Tout d'abord, pour rendre un élément déplaçable, définissez l'attribut draggable sur true :

<img draggable="true">

Quoi déplacer - ondragstart et setData()

Ensuite, spécifiez ce qui se passe lorsque l'élément est en cours de déplacement.

Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(event), qui spécifie les données en cours de déplacement.

La méthode dataTransfer.setData() définit le type et la valeur des données déplacées :

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

Text représente le type de données à ajouter à l'objet déplacé. La valeur est l'id de l'élément déplaçable ("drag1").

Où déposer - ondragover

L'événement ondragover spécifie où les données déplacées doivent être placées.

Par défaut, les données ou les éléments ne peuvent pas être placés dans d'autres éléments. Pour autoriser le placement, nous devons empêcher le traitement par défaut de l'élément.

Cela se fait en appelant la méthode event.preventDefault() de l'événement ondragover :

event.preventDefault()

Déposer - ondrop

Lors du dépôt des données glissées, l'événement drop se produit.

Dans l'exemple ci-dessus, l'attribut ondrop appelle une fonction, drop(event) :

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Explication du code :

  • L'appel de preventDefault() pour éviter le traitement par défaut des données par le navigateur (le comportement par défaut de l'événement drop est d'ouvrir le lien).
  • Utilisation de la méthode dataTransfer.getData("Text") pour récupérer les données glissées. Cette méthode renvoie toutes les données du même type qui ont été définies dans la méthode setData().
  • Les données glissées correspondent à l'id de l'élément glissé ("drag1").
  • Ajouter l'élément glissé à l'élément cible (la cible du glisser-déposer).

Examples

Plus d’exemples

Glisser-déposer des images dans les deux sens
Comment glisser-déposer des images entre deux éléments <div>.

Autres extensions