Attribut `draggable` et événement `dragstart`

Tout élément devient une source de glissement lorsque vous définissez draggable="true". Les liens et les images peuvent être déplacés par défaut ; pour tout le reste (div, li, span), l’attribut doit être indiqué explicitement. draggable="false" exclut un élément du glissement natif.

Lorsque l’utilisateur commence un glissement, l’élément source déclenche dragstart. C’est ici que vous initialisez le glissement : notez quel élément est déplacé, appliquez-lui éventuellement un style et écrivez les données dans l’objet dataTransfer que la cible du dépôt pourra lire.

Si vous indiquez qu’un élément peut être déplacé, mais que vous ne gérez jamais dragstart, le navigateur déplace tout de même une image fantôme, mais aucune donnée n’est définie : la plupart des cibles refusent donc le dépôt. Associez toujours un attribut draggable à un écouteur dragstart qui stocke au moins un identifiant.

e.dataTransfer.effectAllowed = "move" dans dragstart restreint l’opération : « copy », « move », « link », « copyMove », « all » ou « none ». Cela détermine le curseur affiché par le navigateur ainsi que le dropEffect que la cible pourra définir ultérieurement.

Ajoutez une classe CSS à la source pour qu’elle paraisse estompée pendant son déplacement : card.classList.add("dragging"). Supprimez la classe dans l’événement dragend afin que le style soit réinitialisé, que le dépôt ait réussi ou qu’il ait été annulé avec Échap.

Par défaut, le navigateur déplace une capture translucide de la source. Remplacez-la avec e.dataTransfer.setDragImage(node, offsetX, offsetY) — transmettez un élément DOM masqué ou une Image à afficher comme aperçu personnalisé près du curseur.

dragend est déclenché sur la source une fois le glissement terminé, que le dépôt ait réussi, qu’il ait été effectué sur une cible non valide ou qu’il ait été annulé. Utilisez-le pour le nettoyage : supprimer la classe de glissement, masquer les aperçus fantômes et restaurer l’opacité.

Dans dragend, vérifiez e.dataTransfer.dropEffect. Si la valeur est « none », le dépôt n’a pas eu lieu (la cible l’a refusé, l’utilisateur a appuyé sur Échap ou le dépôt a été effectué en dehors de la page). Sinon, elle correspond à l’effet choisi par la cible (« move », « copy », « link »).

Le glisser-déposer natif est conçu avant tout pour les ordinateurs de bureau. Sur les appareils tactiles, l’API fonctionne à peine sans couche de compatibilité ou solution de remplacement fondée sur les événements de pointeur. Pour les interfaces de réorganisation adaptées aux appareils mobiles, préférez des bibliothèques comme SortableJS ou dnd-kit, qui masquent les différences entre les deux modèles d’événements.

Le glisser-déposer natif n’est pas accessible au clavier : les utilisateurs qui utilisent uniquement le clavier ne peuvent pas réorganiser les éléments. Proposez toujours une solution alternative : gestionnaires des touches fléchées, boutons pour déplacer vers le haut ou vers le bas, ou boîte de dialogue de réorganisation contrôlée par aria. Le glisser-déposer doit améliorer l’expérience, pas la remplacer.

La sélection de texte à l’intérieur d’éléments déplaçables peut gêner le glissement. Appliquez user-select: none et -webkit-user-drag: element en CSS à la source afin que le navigateur déplace l’élément au lieu de sélectionner le texte qu’il contient.

Pourquoi devez-vous généralement associer un écouteur dragstart à un élément, alors que l’attribut draggable="true" suffit à le rendre déplaçable ?

Marquez les sources avec draggable="true" et utilisez dragstart pour alimenter dataTransfer, définir effectAllowed et éventuellement une image de glissement personnalisée. Associez-lui dragend pour nettoyer les styles. Proposez des alternatives au clavier pour l’accessibilité et envisagez des couches de compatibilité pour les appareils tactiles.