DndContext, useDraggable, and useDroppable

Every drag-and-drop feature in dnd-kit must be wrapped in a DndContext component. DndContext is the coordination hub — it tracks active drags, communicates between draggables and droppables, and fires event callbacks. You typically place it at the level of the component that manages drag state.

The useDraggable({ id }) hook makes a component draggable. It returns four key values: attributes (ARIA props to spread on the element), listeners (event handlers for drag initiation), setNodeRef (attaches the draggable ref), and transform (the current translation as {x, y, scaleX, scaleY}).