HTML API de Glisser-Déposer

L'API HTML Glisser-Déposer permet de glisser et déposer un élément.

Exemple

Faites glisser l'image de formation-ti.org dans le deuxième rectangle.

Glisser et Déposer

Glisser et déposer est une fonctionnalité très courante. C'est lorsque vous "attrapez" un objet et le déplacez vers un autre emplacement.

Support des Navigateurs

Les chiffres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge Glisser et Déposer.

API
Glisser et Déposer 4.0 9.0 3.5 6.0 12.0

Exemple de l'API HTML Glisser-Déposer

L'exemple ci-dessous illustre un simple glisser-déposer :

Exemple

<!DOCTYPE HTML>
<html>
<head>
<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
ev.preventDefault();
}

function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<img id="img1" src="img_logo.gif" draggable="true" ondragstart="dragstartHandler(event)" width="336" height="69">

</body>
</html>
Essayez-le vous-même »

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 Glissable

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

<img id="img1" draggable="true">

ou :

<p id="p1" draggable="true">Texte glissable</p>

Que Glisser - ondragstart et setData()

Ensuite, spécifiez ce qui doit se passer lorsque l'élément est glissé.

Dans l'exemple ci-dessus, l'attribut ondragstart de l'élément <img> appelle une fonction (dragstartHandler(ev)), qui précise quelles données doivent être glissées.

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

function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

Dans ce cas, le type de données est "text" et la valeur est l'id de l'élément glissable ("img1").

Où Déposer - ondragover

L'attribut ondragover de l'élément <div> appelle une fonction (dragoverHandler(ev)), qui précise 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 dépôt, nous devons empêcher le traitement par défaut de l'élément.

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

function dragoverHandler(ev) {
ev.preventDefault();
}

Effectuer le Dépôt - ondrop

Lorsque les données glissées sont déposées, un événement de dépôt se produit.

Dans l'exemple ci-dessus, l'attribut ondrop de l'élément <div> appelle une fonction, dropHandler(event) :

function dropHandler(ev) {
ev.preventDefault();
const 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 (le comportement par défaut est d'ouvrir le lien lors du dépôt)
  • 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 au même type dans la méthode setData()
  • Les données glissées sont l'id de l'élément glissé ("img1")
  • Ajoutez l'élément glissé dans l'élément de dépôt

Plus d'Exemples

Exemple

Comment glisser et déposer un élément <h1> dans un élément <div> :

<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
ev.preventDefault();
}

function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<h1 id="h1" draggable="true" ondragstart="dragstartHandler(event)">formation-ti.org</h1>
Essayez-le vous-même »

Exemple

Comment glisser et déposer un élément <a> dans un élément <div> :

<script>
function dragstartHandler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

function dragoverHandler(ev) {
ev.preventDefault();
}

function dropHandler(ev) {
ev.preventDefault();
const data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>

<a id="link1" href="https://formation-ti.org" draggable="true" ondragstart="dragstartHandler(event)">formation-ti.org</a>
Essayez-le vous-même »

Exemple

Comment glisser et déposer une image d'un élément <div> à un autre :

Essayez-le vous-même »