Drag and Drop (glisser-déposer) en HTML5 et Javascript

Drag & Drop c'est quoi?

Drag & drop (ou glisser déposer) est une méthode qui permet de déplacer les éléments graphiques à l’aide de la souris, ou directement sur l’écran tactile (smartphone, tablette...).

Le système de drag and drop n’est pas propre qu’aux applications Web, mais a toujours été très célèbre sur les systèmes d’exploitation (principalement Windows et MacOS) depuis bien longtemps. En effet, la suppression d'un fichier sur Windows par exemple peut se faire en glissant directement celui-ci dans la corbeille.

Dans une page Web, le système de drag and drop offre une interactivité évoluée avec l’utilisateur, surtout si celui-ci s’y rend à l'aide d'un appareil à écran tactile. C’est ce qui explique pourquoi de nombreux sites et applications Web le mettent en œuvre sur leurs pages comme c’est le cas sur Gmail où vous pouvez glisser un fichier depuis votre ordinateur afin de le joindre à un Email.

Drag & drop en HTML5

La version 5 de HTML a apporté beaucoup de nouveautés que j'ai résumées dans cette leçon consacrée à la présentation du standard HTML5. Parmi elles il y a la prise en charge de drag & drop à l'aide de l'attribut booléen draggable que l'on peut déclarer dans l'élément que l'on souhaite déplacer. Bien entendu, c'est le Javascript qui va faire tout le travail. En effet, Javascript dispose d'une API avec une large collection d'événements, attributs et méthodes qui permettent de mettre en place un système de glisser-déposer, en l'occurence, la propriété dataTransfer qui contient toutes les informations concernant les éléments à déplacer. La collection complète de ces outils est disponible sur Mozilla Developer Network (MDN).

Passons à la pratique