API de glisser-déposer HTML
En HTML, n'importe quel élément peut être glissé et déposé.
Exemple
Faites glisser l'image W3Schools dans le rectangle.
Glisser déposer
Le glisser-déposer est une fonctionnalité très courante. C'est lorsque vous "saisissez" un objet et que vous le faites glisser vers un autre emplacement.
Prise en charge du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge le glisser-déposer.
API | |||||
---|---|---|---|---|---|
Drag and Drop | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Exemple de glisser-déposer HTML
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>
Cela peut sembler compliqué, mais passons en revue toutes les différentes parties d'un événement de glisser-déposer.
Rendre un élément déplaçable
Tout d'abord : pour rendre un élément déplaçable, définissez l' draggable
attribut 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' ondragstart
attribut appelle une fonction, drag(event), qui spécifie les données à faire glisser.
La dataTransfer.setData()
méthode définit le type de données et la valeur des données glissées :
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
Dans ce cas, le type de données est "texte" et la valeur est l'identifiant de l'élément déplaçable ("drag1").
Où déposer - ondragover
L' ondragover
événement 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 autoriser un drop, il faut empêcher la gestion par défaut de l'élément.
Cela se fait en appelant la event.preventDefault()
méthode pour l'événement ondragover :
event.preventDefault()
Faire le drop - ondrop
Lorsque les données glissées sont supprimées, un événement de suppression 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 la gestion par défaut du navigateur des données (la valeur par défaut est ouverte en tant que lien lors de la suppression)
- Obtenez les données glissées avec la méthode dataTransfer.getData(). Cette méthode renverra toutes les données qui ont été définies sur le même type dans la méthode setData()
- Les données glissées sont l'identifiant de l'élément glissé ("drag1")
- Ajouter l'élément glissé dans l'élément déposé
Plus d'exemples
Exemple
Comment faire glisser (et déposer) une image entre deux éléments <div> :