HTML Drag and Drop API (glisser-déposer)
En HTML, n'importe quel élément peut être glissé et déposé.
Exemple
Faites glisser l'image W3Schools dans le rectangle.
Drag and Drop (glisser-déposer)
Le glisser-déposer est une fonctionnalité très courante. C'est lorsque vous « saisissez » un objet et le faites glisser vers un emplacement différent.
Prise en charge du navigateur
Les nombres dans le tableau spécifient la première version du navigateur qui prend entièrement en charge le Drag and Drop.
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
HTML Drag and Drop Exemple
L'exemple ci-dessous est un simple exemple de glisser-déposer :
Exemple
<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)"
ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Try it Yourself »Cela peut sembler compliqué, mais passons en revue toutes les différentes parties d'un événement glisser-déposer.
Rendre un é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">
Que faire glisser - ondragstart et setData()
Ensuite, spécifiez ce qui doit se passer lorsque l'élément est déplacé.
Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction, drag(event), qui spécifie les données à faire glisser.
La méthode dataTransfer.setData() définit le type de données et la valeur des données déplacées :
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Dans ce cas, le type de données est "text" et la valeur est l'identifiant de l'élément déplaçable ("drag1").
Où déposer — ondragover
L'événement ondragover spécifie où les données glissées peuvent être déposées.
Par défaut, les données/éléments ne peuvent pas être déposés dans d'autres éléments. Pour permettre un drop, il faut empêcher la gestion par défaut de l'élément.
Cela se fait en appelant la méthode event.preventDefault() pour l'événement ondragover :
event.preventDefault()
Faites le Drop - ondrop
Lorsque les données déplacées sont déposées, un événement de dépôt 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));
}
Code expliqué :
- Appelez PreventDefault() pour empêcher le traitement par défaut des données par le navigateur (la valeur par défaut est ouverte sous forme de lien lors du dépôt)
- Récupérez les données déplacées avec la méthode dataTransfer.getData(). Cette méthode renverra toutes les données définies sur le même type dans la méthode setData()
- Les données déplacées sont l'identifiant de l'élément déplacé ("drag1")
- Ajouter l'élément glissé dans l'élément déposé
