Glisser-déposer HTML5

Veuillez glisser l'image CodeW3C.com dans le rectangle.

Glisser-déposer

Le glisser-déposer (Drag et Drop) est une fonctionnalité courante. Elle fait référence à l'action de saisir quelque chose et de le glisser dans un autre emplacement.

Le glisser-déposer fait partie de la norme HTML5 : tout élément est glissable.

Support du navigateur

Les nombres dans le tableau indiquent la version du navigateur qui prend en charge pleinement le glisser-déposer.

API
Glisser-déposer 4.0 9.0 3.5 6.0 12.0

Exemple HTML glisser-déposer

Voici un exemple simple sur le 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>

Essayer par vous-même

Il peut sembler un peu complexe, mais examinons toutes les différentes parties de l'événement 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 draggable="true">

Contenu glissant - ondragstart et setData()

Ensuite, définissez ce qui se passe lorsque l'élément est glissé.

Dans l'exemple ci-dessus, l'attribut ondragstart appelle une fonction drag(event), qui spécifie quelles données doivent être glissées.

La méthode setData() de dataTransfer 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 cet exemple, le type de données est "text" et la valeur est l'ID de cet élément glissant ("drag1").

Où glisser - ondragover

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

Par défaut, les données/éléments ne peuvent pas être placés dans d'autres éléments. Pour réaliser le glisser-déposer, nous devons empêcher ce traitement par défaut des éléments.

Cette tâche est réalisée par la méthode event.preventDefault() de l'événement ondragover :

event.preventDefault();

Effectuer le dépôt - ondrop

Un événement drop se produit lorsque les données glissées sont libérées.

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 :

  • Appeler preventDefault() pour empêcher le traitement par défaut des données par le navigateur (le comportement par défaut de l'événement drop est d'ouvrir sous forme de lien)
  • Obtenir les données glissées par la méthode getData() du dataTransfer. Cette méthode renverra tout type de données réglé en setData().
  • Les données glissées sont l'id de l'élément glissé ("drag1")
  • Ajouter l'élément glissé à l'élément de placement

Plus d'exemples

Glisser-déposer des images

Comment glisser-déposer une image entre deux éléments <div> :

Veuillez glisser l'image CodeW3C.com dans le rectangle.

Essayer par vous-même