TL; DR – L’API glisser-déposer HTML5 vous permet de saisissez un objet HTML avec votre curseur et faites-le glisser vers un autre endroit.
Que pouvez-vous glisser-déposer en HTML5?
HTML5 vous permet de rendre n’importe quel élément déplaçable, vous permettant de le prendre avec votre curseur et de le faire glisser vers un emplacement différent qui est défini comme un élément déposable. Dans l’exemple ci-dessous, essayez de faire glisser une image sur un carré:
Cette fonctionnalité simplifie l’expérience utilisateur et permet même de créer de simples jeux en ligne (par exemple, vous pouvez faire glisser et déposer des pièces d’échecs virtuelles). Lorsque vous faites glisser un élément, sa réplique transparente se déplace avec votre curseur jusqu’à ce que vous le déposiez en relâchant le bouton de la souris.
Techniquement, Drag and Drop est une API JavaScript ajoutée à HTML5. Par conséquent, il est important d’avoir au moins des connaissances de base en script pour pouvoir travailler avec cette fonctionnalité.
Événements pour le glisser-déposer HTML5
Dans le tableau ci-dessous, vous verrez tous les événements relatifs à la fonctionnalité Glisser-Déposer:
| Événement | Explication |
|---|---|
| glisser | Le curseur se déplace tout en faisant glisser un élément |
| drop | Le processus de glissement se termine |
| dragstart | Le curseur prend l’élément et commence à faire glisser |
| dragend | Le bouton de la souris est relâché, laissant tomber l’élément |
| dragenter | Le curseur entre dans l’élément cible |
| dragleave | Le curseur quitte l’élément cible |
| dragover | Le curseur se déplace sur l’élément cible |
Explication étape par étape du glisser-déposer
Le codage par glisser-déposer HTML5 semble assez compliqué à première vue car il inclut des scripts dans JS. Cependant, examinons chaque partie du processus pour le rendre plus facile à comprendre.
Éléments pouvant être déplacés
Tout d’abord, vous devez vous assurer que l’élément que vous souhaitez faire glisser a un Attribut HTML5 draggable appliqué et sa valeur définie sur true:
Glisser
Ensuite, définissez ce qui doit se passer après avoir fait glisser un objet. Vous pouvez le faire en appelant un gestionnaire d’événements pour un événement dragstart et définissant une fonction à exécuter.
La valeur et le type de données des données déplacées doivent être définis par le dataTransfer.setData() méthode:
Suppression
Les données glaçables HTML5 sont spécifiées en attachant un gestionnaire d’événements à l’événement dragover.
Les éléments et les données ne peuvent pas être déposé dans d’autres éléments par défaut. Cela signifie que vous devez arrêter l’élément « s comportement par défaut en utilisant la méthode event.preventDefault():
Un événement drop se produit lorsque les données HTML5 déplaçables sont déposées. Il est appelé par le gestionnaire d’événements ondrop:
Le code final: un exemple
En gros, vous avez besoin de votre code pour pouvoir effectuez quatre étapes:
- Empêchez l’action par défaut du navigateur Web liée aux données en appelant
preventDefault() - Obtenir les données avec la méthode
dataTransfer.getData() - Apposez l’élément glissé sur l’élément de dépôt
Voyons comment cela fonctionne dans le exemple ci-dessous:
Glisser-déposer HTML5: conseils utiles
- Vous pouvez faire glisser différents types d’éléments, y compris, mais sans s’y limiter, des fichiers, des liens, des images et du texte.
- Vous pouvez également faire glisser plusieurs éléments à la fois. Cependant, il est recommandé de les avoir tous dans le même format pour des raisons de cohérence.
- Les éléments de formulaire qui acceptent l’entrée de l’utilisateur peuvent être des zones de dépôt par défaut.