HTML - Drag and Drop API : Guide pour débutants

Salut à toi, futur(e) développeur(se) web ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de l'API Drag and Drop d'HTML5. En tant que ton prof de informatique bien-aimé du quartier, je suis là pour te guider à travers cette fonctionnalité fascinante qui peut rendre tes pages web plus interactives et conviviales. Alors, prends ta boisson favorite, installe-toi confortablement, et plongeons dedans !

Qu'est-ce que l'API Drag and Drop ?

Avant de commencer à faire glisser et déposer des éléments comme des magiciens numériques, comprenstons ce qu'est cette API. L'API Drag and Drop (DnD) nous permet de rendre les éléments HTML glissables, ce qui signifie que les utilisateurs peuvent cliquer sur un élément, le glisser vers un nouvel emplacement, et le déposer là. C'est comme donner à tes éléments de page web des superpuissances !

Rendre un élément glissable

Commençons par les bases. Pour rendre un élément glissable, nous devons utiliser l'attribut draggable. C'est aussi simple que d'ajouter cet attribut à n'importe quel élément HTML que tu veux que les utilisateurs puissent déplacer.

<div draggable="true">Glisse-moi !</div>

Dans cet exemple, nous avons créé un élément <div> et l'avons rendu glissable en setting draggable="true". Maintenant, les utilisateurs peuvent cliquer sur cette div et la faire glisser autour de la page. Génial, non ?

Mais attend, il y a plus ! Rendre un élément glissable ne suffit pas. Nous devons ajouter un peu de JavaScript pour contrôler ce qui se passe lorsque l'élément est glissé et déposé. C'est là que nos événements de glisser-déposer deviennent pratiques.

Événements de Glisser-Déposer

L'API Drag and Drop nous fournit plusieurs événements auxquels nous pouvons écouter et répondre. Ces événements nous permettent de contrôler tout le processus de glisser-déposer. Voici les événements principaux :

Nom de l'événement	Description
dragstart	Se déclenche lorsque l'utilisateur commence à glisser un élément
drag	Se déclenche continuellement mientras l'utilisateur glisse un élément
dragenter	Se déclenche lorsque un élément glissé entre dans une zone de dépôt valide
dragover	Se déclenche continuellement mentre un élément glissé est au-dessus d'une zone de dépôt valide
dragleave	Se déclenche lorsque un élément glissé quitte une zone de dépôt valide
drop	Se déclenche lorsque l'utilisateur dépose un élément
dragend	Se déclenche lorsque l'opération de glisser-déposer se termine (que ce soit avec succès ou non)

Maintenant, voyons comment nous pouvons utiliser ces événements en pratique :

<div id="draggable" draggable="true">Glisse-moi !</div>
<div id="droppable">Dépose ici !</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
console.log('Glisser commencé');
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault(); // Nécessaire pour permettre le dépôt
console.log('Glissant sur la zone de dépôt');
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
console.log('Déposé !');
droppable.appendChild(draggable);
});
</script>

Dans cet exemple, nous avons créé deux éléments <div> : un glissable et un déposable. Nous avons ajouté des écouteurs d'événement pour dragstart, dragover, et drop. Lorsque vous glissez l'élément et le déposez dans la zone de dépôt, vous verrez des messages dans la console, et l'élément glissé sera déplacé dans la zone de dépôt.

L'objet DataTransfer

Maintenant, parlons d'un outil puissant dans notre boîte à outils de glisser-déposer : l'objet DataTransfer. Cet objet est utilisé pour stocker les données qui sont glissées pendant une opération de glisser-déposer. Il nous permet de définir et de récupérer des informations sur l'opération de glisser.

Voici comment nous pouvons l'utiliser :

<div id="draggable" draggable="true">Glisse-moi !</div>
<div id="droppable">Dépose ici !</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
});
</script>

Dans cet exemple, nous utilisons setData() pour stocker l'ID de l'élément glissé lorsque le glisser commence. Ensuite, dans l'événement drop, nous récupérons ces données à l'aide de getData() et les utilisons pour déplacer l'élément glissé.

Processus de Glisser-Déposer

Maintenant que nous avons couvert les pièces individuelles, passons tout le processus de glisser-déposer :

1. Initier le Glisser : L'utilisateur clique sur un élément glissable et commence à le glisser.
2. Glisser : Alors que l'utilisateur déplace la souris, l'événement drag se déclenche continuellement.
3. Entrer dans la Zone de Dépôt : Lorsque l'élément glissé entre dans une zone de dépôt valide, l'événement dragenter se déclenche.
4. Sur la Zone de Dépôt : Pendant que l'élément glissé est sur la zone de dépôt, l'événement dragover se déclenche continuellement.
5. Quitter la Zone de Dépôt : Si l'élément glissé quitte la zone de dépôt, l'événement dragleave se déclenche.
6. Déposer : Lorsque l'utilisateur relâche le bouton de la souris pour déposer l'élément, l'événement drop se déclenche.
7. Fin du Glisser : Enfin, l'événement dragend se déclenche pour indiquer la fin de l'opération de glisser.

Voici un exemple complet qui met tout cela ensemble :

<div id="draggable" draggable="true">Glisse-moi !</div>
<div id="droppable">Dépose ici !</div>

<script>
const draggable = document.getElementById('draggable');
const droppable = document.getElementById('droppable');

draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
e.target.style.opacity = '0.5';
});

draggable.addEventListener('dragend', (e) => {
e.target.style.opacity = '';
});

droppable.addEventListener('dragenter', (e) => {
e.target.style.background = 'lightblue';
});

droppable.addEventListener('dragleave', (e) => {
e.target.style.background = '';
});

droppable.addEventListener('dragover', (e) => {
e.preventDefault();
});

droppable.addEventListener('drop', (e) => {
e.preventDefault();
const data = e.dataTransfer.getData('text');
const draggedElement = document.getElementById(data);
e.target.appendChild(draggedElement);
e.target.style.background = '';
});
</script>

Dans cet exemple, nous avons implémenté tous les événements de glisser-déposer. Nous changeons l'opacité de l'élément glissé pendant le glisser, mettons en surbrillance la zone de dépôt lorsque un élément est glissé dessus, et déplçons l'élément glissé dans la zone de dépôt lorsque celui-ci est déposé.

Et voilà, les amis ! Vous venez d'apprendre les bases de l'API Drag and Drop d'HTML5. Avec ces connaissances, vous pouvez créer des éléments interactifs sur vos pages web que les utilisateurs peuvent glisser et déposer. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter et de créer vos propres projets de glisser-déposer.

Alors que nous terminons cette leçon, je suis rappelé par une citation du grand Bruce Lee : "Je ne crains pas l'homme qui a pratiqué 10 000 coups une fois, mais je crains l'homme qui a pratiqué un coup 10 000 fois." Alors, va et pratique tes compétences en glisser-déposer. Avant de savoir, tu seras créer des expériences interactives web incroyables qui feront tomber les utilisateurs de leur chaise !

Bonne programmation, et puisses tes éléments toujours tomber là où tu veux qu'ils tombent !

Credits: Image by storyset