4. Drag & drop

En aquest capítol explorarem l'API de Drag & Drop (DnD) d'HTML5, un estàndard que permet crear interfícies altament interactives on l'usuari pot moure elements visualment d'una posició a una altra. A diferència de les solucions antigues que requerien càlculs complexos de coordenades del ratolí, l'API moderna ens ofereix un sistema robust basat completament en esdeveniments.

El funcionament es divideix en dos actors principals: l'element arrossegable (source) i la zona de destí (target). Aprendrem a configurar l'atribut draggable="true", a gestionar el cicle de vida de l'arrossegament (dragstart, dragend) i a preparar les zones de recepció (dragover, drop).

Un concepte clau que tractarem és l'objecte DataTransfer, que actua com a vehicle per transportar dades entre l'origen i el destí sense embrutar l'abast global. A més, veurem la importància crítica del mètode event.preventDefault(), imprescindible per anul·lar el bloqueig natiu del navegador i permetre que un element sigui "deixat anar" vàlidament. Dominar aquesta API us permetrà crear des de taulers estil Kanban fins a carregadors de fitxers intuïtius, tot utilitzant exclusivament JavaScript pur.