Drag & Drop in HTML5

Cette leçon porte sur la fonctionnalité de glisser-déposer (drag & drop) en HTML5, une technique courante dans le développement web permettant de déplacer des éléments visuels d'un endroit à un autre. Elle s'inscrit dans un cours sur les interactions utilisateur en JavaScript et HTML5.

Introduction au Drag & Drop en HTML5

Le drag & drop, ou glisser-déposer, est une fonctionnalité très répandue qui consiste à saisir un objet à l'écran, puis à le déplacer vers une autre position. Avec HTML5, cette capacité est intégrée nativement dans la norme, ce qui permet de rendre tout élément déplaçable sans recourir à des bibliothèques externes. Ainsi, images, textes, fichiers, ou blocs HTML peuvent être manipulés par glisser-déposer.

Les notions fondamentales du drag & drop

Pour comprendre le fonctionnement du drag & drop, il faut distinguer trois notions clés :

• L’élément source : l’élément que l’on souhaite déplacer, par exemple une image, un texte ou une div.
• Le contenu à déplacer (payload) : les données associées à l’élément source qui seront transférées lors du déplacement.
• La cible (target ou drop zone) : l’endroit où l’élément sera déposé.

Les événements du drag & drop en HTML et JavaScript

Le glisser-déposer repose sur une série d’événements qui permettent de gérer chaque étape du déplacement :

Événement HTML + JavaScript	Événement JavaScript	Description
ondragstart	dragstart	Au début du déplacement
ondrag	drag	En cours de déplacement
ondragenter	dragenter	Entrée dans la zone cible
ondragleave	dragleave	Sortie de la zone source
ondragover	dragover	Survol de la zone cible
ondrop	drop	Déposer l’élément (relâcher le bouton de la souris)
ondragend	dragend	Fin du glisser-déposer

Ces événements permettent de détecter et de réagir à chaque phase du déplacement d’un élément.

Implémentation pratique du drag & drop

Rendre un élément déplaçable

Pour qu’un élément HTML soit déplaçable, il faut lui attribuer l’attribut draggable="true". Par exemple :

<img id="img1" src="Tunisia.png" draggable="true" />

<div class="column" draggable="true">
    <header>B</header>
</div>

Définir ce qui est glissé : l’événement ondragstart et la méthode setData()

Lors du début du déplacement, l’événement dragstart est déclenché. C’est à ce moment que l’on précise quelles données seront transférées lors du glisser-déposer. La propriété dataTransfer contient ces données, et la méthode setData(type, data) permet de définir leur type et leur contenu.

Exemple de fonction JavaScript associée à l’événement dragstart :

function GererDragStart(e) {
    e.dataTransfer.setData("text", e.target.id);
}

Cette fonction stocke l’identifiant de l’élément déplacé dans les données transférées.

Définir la zone de dépôt : l’événement ondragover

Par défaut, les éléments HTML ne permettent pas de déposer des données. Pour autoriser le dépôt dans une zone cible, il faut empêcher le comportement par défaut du navigateur lors de l’événement dragover en appelant event.preventDefault().

Exemple :

function GererDragOver(e) {
    e.preventDefault(); // Nécessaire pour permettre le drop
}

Effectuer le dépôt : l’événement ondrop

Lorsque l’utilisateur relâche le bouton de la souris dans la zone cible, l’événement drop est déclenché. Cette étape permet de récupérer les données transférées et de les utiliser selon le contexte.

Exemple de fonction de gestion du dépôt :

function GererDrop(e) {
    e.preventDefault();

    // Récupération des données transférées
    var data = e.dataTransfer.getData("text");

    // Utilisation des données : ici, on modifie la source d'une image cible
    e.target.src = document.getElementById(data).src;
}

Résumé des étapes pour implémenter un drag & drop

• Rendre un élément déplaçable en définissant draggable="true".
• Gérer l’événement dragstart pour spécifier les données à transférer avec setData().
• Autoriser la zone cible à accepter le dépôt en empêchant le comportement par défaut dans dragover.
• Gérer l’événement drop pour récupérer les données et effectuer l’action souhaitée.

Points clés

• Le drag & drop HTML5 permet de déplacer des éléments visuels en natif, sans bibliothèque externe.
• Trois notions essentielles : élément source, contenu à déplacer, et cible de dépôt.
• Les événements principaux sont : dragstart, dragover, drop, et dragend.
• Il faut définir draggable="true" pour rendre un élément déplaçable.
• La propriété dataTransfer et ses méthodes setData() et getData() gèrent les données transférées.
• Pour autoriser le dépôt, il est indispensable d’appeler event.preventDefault() dans dragover.
• Lors du dépôt, on récupère les données transférées et on peut modifier la cible en conséquence.