DndContext, useDraggable y useDroppable

Toda funcionalidad de arrastrar y soltar en dnd-kit debe estar envuelta en un componente DndContext. DndContext es el núcleo de coordinación: realiza el seguimiento de los arrastres activos, comunica los elementos arrastrables con los elementos de destino y ejecuta callbacks de eventos. Normalmente se coloca en el nivel del componente que administra el estado del arrastre.

El hook useDraggable({ id }) convierte un componente en arrastrable. Devuelve cuatro valores principales: attributes (propiedades ARIA que se aplican al elemento), listeners (controladores de eventos para iniciar el arrastre), setNodeRef (asocia la referencia del elemento arrastrable) y transform (la traslación actual como {x, y, scaleX, scaleY}).

Para configurar un elemento arrastrable, distribuya attributes y listeners en el elemento y pase setNodeRef como propiedad ref. Los atributos incluyen role="button", tabIndex y propiedades aria. Los listeners asocian los controladores de eventos de puntero y teclado que dnd-kit necesita para detectar el inicio del arrastre.

El valor transform de useDraggable es null cuando no se está arrastrando y un objeto de coordenadas durante el arrastre. Se convierte en una cadena CSS mediante CSS.Translate.toString(transform) del paquete @dnd-kit/utilities. Aplíquelo como propiedad CSS transform en el elemento arrastrable para que siga visualmente el cursor.

El hook useDroppable({ id }) marca un contenedor como destino de suelta válido. Devuelve isOver (un booleano que es true mientras un elemento arrastrable pasa por encima de este destino de suelta) y setNodeRef para asociar la referencia al elemento de destino. A diferencia de useDraggable, no hay listeners de eventos que distribuir.

El valor isOver de useDroppable permite proporcionar feedback visual durante un arrastre. Cuando isOver es true, puede aplicar un color de resaltado, un borde o un cambio de fondo a la zona de suelta. Esto ayuda a los usuarios a entender dónde pueden soltar el elemento, algo fundamental para la usabilidad y la accesibilidad.

El callback onDragEnd de DndContext recibe un objeto de evento con dos propiedades importantes: event.active contiene el elemento arrastrado (incluido su id) y event.over contiene el destino de suelta (o null si se suelta fuera de cualquier elemento de destino). Use estos identificadores para actualizar el estado de la aplicación.

En onDragEnd, después de comprobar que event.over no es null, actualiza el estado para reflejar el movimiento. Por ejemplo, si mueve una tarjeta entre columnas en un tablero Kanban, elimine la tarjeta de la columna de origen y agréguela a la columna de destino identificada por event.over.id.

DragOverlay renderiza una vista previa flotante del elemento arrastrado que sigue al cursor. Se renderiza como un portal (fuera del árbol DOM normal), por lo que nunca queda recortado por contenedores con overflow:hidden. A diferencia del elemento original, el overlay puede tener sombras, transformaciones de escala o rotación para indicar que se está arrastrando.

Para renderizar el contenido correcto en DragOverlay, realice un seguimiento del elemento que se está arrastrando mediante la función de devolución de llamada onDragStart. Almacene el ID activo en el estado: setActiveDragId(event.active.id). En onDragEnd, restablézcalo a null. Dentro de DragOverlay, use activeDragId para buscar el elemento correcto y renderizarlo.

Una interfaz de arrastrar y soltar real combina DndContext, varios elementos useDraggable, varias zonas useDroppable y la gestión del estado para realizar un seguimiento de la ubicación de cada elemento. La idea clave es que dnd-kit proporciona la mecánica; su tarea es actualizar el estado en onDragEnd y volver a renderizar la interfaz para reflejar la nueva disposición.

¿Qué utilidad convierte el objeto transform de useDraggable en una cadena de transformación CSS?

DndContext es el centro de coordinación de todas las operaciones de arrastrar y soltar de dnd-kit. useDraggable proporciona attributes, listeners, setNodeRef y transform para los elementos arrastrables. useDroppable proporciona isOver y setNodeRef para los destinos donde se sueltan elementos. onDragEnd le proporciona event.active.id y event.over?.id para actualizar el estado. DragOverlay renderiza una vista previa flotante basada en un portal.