Drag and drop - Lexique web design

Le glisser-déposer, aussi appelé drag and drop est une technique simple et intuitive pour déplacer des éléments sur un ordinateur ou un appareil tactile.

Utilisation du drag & drop

Vous cliquez et maintenez le bouton gauche de la souris sur un élément, un widget ou un document.
Tout en maintenant le bouton enfoncé, vous déplacez le curseur vers la page ou le dossier.
Lorsque le curseur se trouve au-dessus du dossier, vous relâchez le bouton de la souris.

Exemple simple en code avec JavaScript

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Drag and Drop simple</title>
</head>
<body>
    <div id="draggable">Elément à déplacer</div>
    <div id="dropzone">Zone de dépôt</div>
    <script src="script.js"></script>
</body>
</html>

const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');

// Fonction appelée lorsque l'utilisateur commence à faire glisser l'élément
draggable.addEventListener('dragstart', (event) => {
    // Définit le type de données à transférer
    event.dataTransfer.setData('text/plain', 'draggable');
});

// Fonction appelée lorsque l'utilisateur survole la zone de dépôt
dropzone.addEventListener('dragover', (event) => {
    // Empêche le navigateur d'effectuer une action par défaut (comme ouvrir un lien)
    event.preventDefault();
});

// Fonction appelée lorsque l'utilisateur dépose l'élément dans la zone de dépôt
dropzone.addEventListener('drop', (event) => {
    // Empêche le navigateur d'effectuer une action par défaut (comme ouvrir un lien)
    event.preventDefault();

    // Récupère l'ID de l'élément à déplacer
    const id = event.dataTransfer.getData('text/plain');

    // Déplace l'élément vers la zone de dépôt
    document.getElementById(id).appendChild(draggable);
});

synonyme : drag & drop, glisser et déposer