draggable

Description

L’attribut draggable contrôle si un élément peut être glissé via l’API Drag and Drop native du navigateur. Par défaut, les liens (<a>) et les images (<img>) sont déjà draggables. Pour les autres éléments, draggable="true" active cette capacité.

Syntaxe

<div draggable="true">Glissez-moi</div>
<img src="photo.jpg" draggable="false" alt="Photo non déplaçable">

Exemples

Élément glissable avec gestion des événements :

<div draggable="true" id="item" style="cursor: grab; padding: 1rem; border: 1px solid #ccc">
  Élément déplaçable
</div>

<div id="zone-depot" style="padding: 2rem; border: 2px dashed #999">
  Zone de dépôt
</div>

<script>
  const item = document.getElementById('item');
  const zone = document.getElementById('zone-depot');

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

  zone.addEventListener('dragover', (e) => e.preventDefault());
  zone.addEventListener('drop', (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text/plain');
    zone.appendChild(document.getElementById(id));
  });
</script>

Valeurs

Valeur	Description
true	L’élément est déplaçable par glisser-déposer
false	L’élément n’est pas déplaçable

Notes

draggable n’est pas booléen : contrairement à hidden ou disabled, draggable requiert explicitement "true" ou "false" — la présence seule de l’attribut ne suffit pas.

Curseur : ajouter cursor: grab en CSS pour indiquer visuellement que l’élément est déplaçable.

Accessibilité : le drag-and-drop n’est pas accessible au clavier nativement. Toujours fournir une alternative (boutons Monter/Descendre, etc.).