Drag & Drop

Definition

API native du navigateur qui permet de rendre des éléments déplaçables via draggable='true'. Les événements dragstart, dragover et drop orchestrent le transfert de données.

Analogie

Comme déplacer des fichiers sur un bureau : on attrape, on glisse, et on lâche à destination.

Exemple de code

<div draggable="true"
  ondragstart="e.dataTransfer.setData('text', e.target.id)">
  Glisse-moi
</div>
<div ondrop="drop(e)" ondragover="e.preventDefault()">
  Zone de dépôt
</div>

Cas d'usage

Implémenter des interfaces de réorganisation (kanban, tri de listes) ou d'upload de fichiers.

Anti-pattern

Termes lies