dnd-kit Implementation Guide

Overview

This skill provides patterns for implementing drag-and-drop functionality using dnd-kit library that supports both sortable containers and droppable targets simultaneously.

Core Concept

The key to combining useSortable and useDroppable is conditional logic based on drag context:

• When dragging items → containers act as drop-only targets
• When dragging containers → containers act as sortable elements

This is achieved by detecting what's currently being dragged and enabling only the appropriate functionality.

Implementation Pattern

Container Component Structure