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}).

To wire up a draggable element, spread attributes and listeners onto the element, and pass setNodeRef as the ref prop. The attributes include role="button", tabIndex, and aria properties. The listeners attach pointer and keyboard event handlers that dnd-kit needs to detect drag start.

The transform value from useDraggable is null when not dragging and a coordinate object when dragging. You convert it to a CSS string using CSS.Translate.toString(transform) from the @dnd-kit/utilities package. Apply this as the transform CSS property on the draggable element so it visually follows the cursor.

The useDroppable({ id }) hook marks a container as a valid drop target. It returns isOver (a boolean that is true while a draggable hovers over this droppable) and setNodeRef to attach the ref to the droppable element. Unlike useDraggable, there are no event listeners to spread.

The isOver value from useDroppable lets you provide visual feedback during a drag. When isOver is true, you can apply a highlight color, border, or background change to the droppable zone. This helps users understand where they can drop the item, which is critical for usability and accessibility.

The onDragEnd callback on DndContext receives an event object with two important properties: event.active contains the dragged item (including its id), and event.over contains the drop target (or null if dropped outside any droppable). You use these IDs to update your application state.

In onDragEnd, after checking that event.over is not null, you update your state to reflect the move. For example, if you are moving a card between columns in a Kanban board, you remove the card from the source column and add it to the target column identified by event.over.id.

DragOverlay renders a floating preview of the dragged item that follows the cursor. It renders as a portal (outside the normal DOM tree) so it is never clipped by overflow:hidden containers. Unlike the original element, the overlay can have drop-shadows, scale transforms, or rotation to indicate it is being dragged.

To render the correct content in DragOverlay, track which item is currently being dragged using the onDragStart callback. Store the active ID in state: setActiveDragId(event.active.id). In onDragEnd, reset it to null. Inside DragOverlay, use activeDragId to look up the correct item and render it.

A real drag-and-drop UI combines DndContext, multiple useDraggable elements, multiple useDroppable zones, and state management to track which item is where. The key insight is that dnd-kit provides the mechanics — it is your job to update state in onDragEnd and re-render the UI to reflect the new arrangement.

Which utility converts the transform object from useDraggable into a CSS transform string?

DndContext is the coordination hub for all dnd-kit drag operations. useDraggable provides attributes, listeners, setNodeRef, and transform for draggable elements. useDroppable provides isOver and setNodeRef for drop targets. onDragEnd gives you event.active.id and event.over?.id to update state. DragOverlay renders a portal-based floating preview.