Glisser-déposer en JavaScript

Le concept de « glisser-déposer » ou « drag-and-drop » en anglais, est une fonctionnalité courante dans de nombreuses applications web modernes qui permet aux utilisateurs de manipuler les éléments de l’interface en les déplaçant d’un endroit à un autre à l’aide de la souris. En JavaScript, le glisser-déposer est implémenté en capturant et en manipulant les événements de la souris associés au déplacement et au relâchement de celle-ci.

Pour mettre en œuvre le glisser-déposer en JavaScript, il est nécessaire de gérer plusieurs événements de la souris, notamment « mousedown », « mousemove » et « mouseup ». Lorsque l’utilisateur clique sur un élément qu’il souhaite déplacer (souvent appelé « draggable »), un événement « mousedown » est déclenché. En réponse à cet événement, les coordonnées de la souris sont enregistrées et un indicateur est activé pour indiquer que l’élément est en cours de déplacement.

Ensuite, lors du déplacement de la souris (événement « mousemove »), les coordonnées sont continuellement mises à jour et l’élément déplacé est repositionné en fonction de la différence entre les coordonnées actuelles de la souris et celles enregistrées lors de l’événement « mousedown ». Cela crée l’illusion que l’élément est « traîné » par la souris.

Enfin, lorsque l’utilisateur relâche le bouton de la souris (événement « mouseup »), l’élément est déposé à son nouvel emplacement et les écouteurs d’événements associés sont retirés. L’interaction de glisser-déposer est ainsi complétée.

Voici un exemple simple de code JavaScript illustrant l’implémentation du glisser-déposer :

javascriptCopy code
// Sélection de l'élément à déplacer
var draggableElement = document.getElementById('draggable');

// Variables pour stocker les coordonnées de la souris
var offsetX, offsetY;

// Fonction pour gérer l'événement de pression sur la souris
function onMouseDown(event) {
  // Enregistrer les coordonnées de la souris par rapport à l'élément
  offsetX = event.clientX - draggableElement.getBoundingClientRect().left;
  offsetY = event.clientY - draggableElement.getBoundingClientRect().top;
  
  // Activer le suivi du mouvement de la souris
  document.addEventListener('mousemove', onMouseMove);
  
  // Désactiver l'écouteur d'événements "mousedown" pour éviter les conflits
  document.removeEventListener('mousedown', onMouseDown);
  
  // Activer l'écouteur d'événement "mouseup" pour détecter le relâchement de la souris
  document.addEventListener('mouseup', onMouseUp);
}

// Fonction pour gérer l'événement de déplacement de la souris
function onMouseMove(event) {
  // Calculer les nouvelles coordonnées de l'élément en fonction du déplacement de la souris
  var newLeft = event.clientX - offsetX;
  var newTop = event.clientY - offsetY;
  
  // Appliquer les nouvelles coordonnées à l'élément
  draggableElement.style.left = newLeft + 'px';
  draggableElement.style.top = newTop + 'px';
}

// Fonction pour gérer l'événement de relâchement de la souris
function onMouseUp() {
  // Désactiver le suivi du mouvement de la souris
  document.removeEventListener('mousemove', onMouseMove);
  
  // Réactiver l'écouteur d'événements "mousedown" pour permettre de commencer un nouveau glisser-déposer
  document.addEventListener('mousedown', onMouseDown);
  
  // Désactiver l'écouteur d'événement "mouseup"
  document.removeEventListener('mouseup', onMouseUp);
}

// Ajouter un écouteur d'événement pour détecter le début du glisser-déposer
document.addEventListener('mousedown', onMouseDown);

Dans cet exemple, « draggable » est l’identifiant de l’élément HTML que l’utilisateur peut déplacer en utilisant le glisser-déposer. Lorsque l’utilisateur clique sur cet élément, la fonction « onMouseDown » est déclenchée, enregistrant les coordonnées de la souris par rapport à l’élément et activant le suivi du mouvement de la souris. Pendant le déplacement de la souris, la fonction « onMouseMove » est appelée pour mettre à jour les coordonnées de l’élément et simuler son déplacement. Enfin, lorsque l’utilisateur relâche le bouton de la souris, la fonction « onMouseUp » est exécutée pour désactiver le suivi du mouvement de la souris et permettre à l’utilisateur de commencer un nouveau glisser-déposer.

Cette implémentation de base peut être étendue pour répondre à des besoins spécifiques, tels que la restriction des mouvements à une certaine zone, le confinement à un axe spécifique, ou encore l’interaction avec d’autres éléments de l’interface utilisateur.

Bien sûr, poursuivons en approfondissant le sujet du glisser-déposer en JavaScript.

L’une des fonctionnalités les plus courantes impliquant le glisser-déposer est la possibilité de déplacer des éléments d’une liste à une autre, souvent utilisée dans les interfaces utilisateur pour organiser des éléments ou des tâches. Pour réaliser cela, nous devons non seulement détecter le début du glisser-déposer sur un élément, mais également déterminer si cet élément est autorisé à être déplacé vers une autre zone, puis effectuer les modifications nécessaires sur l’interface utilisateur en conséquence.

Voici un exemple étendu qui illustre comment implémenter le glisser-déposer pour déplacer des éléments entre deux listes :

HTML :

htmlCopy code
<div class="container">
  <div class="list" id="list1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <div class="item" draggable="true" ondragstart="drag(event)">Item 1div>
    <div class="item" draggable="true" ondragstart="drag(event)">Item 2div>
    <div class="item" draggable="true" ondragstart="drag(event)">Item 3div>
  div>
  
  <div class="list" id="list2" ondrop="drop(event)" ondragover="allowDrop(event)">div>
div>

JavaScript :

javascriptCopy code
// Fonction pour gérer le début du glisser-déposer
function drag(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
}

// Fonction pour permettre le glisser-déposer
function allowDrop(event) {
  event.preventDefault();
}

// Fonction pour gérer le dépôt de l'élément
function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text/plain');
  var draggedElement = document.getElementById(data);
  var destinationList = event.target.closest('.list');

  // Vérifier si l'élément est déposé dans une liste valide
  if (destinationList && destinationList.id !== draggedElement.parentNode.id) {
    destinationList.appendChild(draggedElement);
  }
}

Dans cet exemple, nous avons deux listes représentées par les éléments avec les IDs « list1 » et « list2 ». Chaque élément à l’intérieur de ces listes est rendu draggable en définissant l’attribut « draggable » sur true et en écoutant l’événement « dragstart » pour déclencher la fonction drag().

La fonction drag() est appelée lorsque l’utilisateur commence à faire glisser un élément. À ce stade, nous utilisons event.dataTransfer.setData() pour définir le format de données à transférer, qui est ici du texte simple, et l’ID de l’élément dragué.

Ensuite, la fonction allowDrop() est appelée sur l’événement « dragover » pour permettre le dépôt d’un élément dans une zone cible. Dans notre cas, cette fonction appelle event.preventDefault() pour annuler le comportement par défaut du navigateur, qui est de ne pas autoriser le dépôt.

Enfin, la fonction drop() est appelée lorsque l’utilisateur relâche l’élément dragué. Nous utilisons event.dataTransfer.getData() pour récupérer l’ID de l’élément dragué, puis nous vérifions si l’élément est déposé dans une liste valide en utilisant event.target.closest(‘.list’). Si c’est le cas, nous déplaçons l’élément dans cette liste en utilisant appendChild().

Ce modèle peut être étendu pour gérer des interactions plus complexes, telles que la réorganisation des éléments dans une liste ordonnée, la suppression d’éléments par glisser-déposer dans une corbeille, ou même la création de nouvelles fonctionnalités basées sur le glisser-déposer, telles que le téléchargement de fichiers en les faisant glisser depuis le bureau vers le navigateur.