dnd-kit-implementationlisted

# 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 ```tsx const SortableDroppableContainer = ({ container }) => { // useSortable for container reordering const { attributes, listeners, setNodeRef: setSortableRef, transform, transition, isDragging, } = useSortable({ id: container.id }); // useDroppable for receiving items const { setNodeRef: setDroppableRef, isOver } = useDroppable({ id: container.id, }); // Active element from context const { active } = useDndContext(); // Determine behavior based on what's being dragged const isItem = active?.id?.toString().startsWith('item-'); const isContainer = active?.id?.toString().startsWith('container-'); // Apply conditional refs const setNodeRef = isItem ? setDroppableRef : setSortableRef; return ( <div ref={setNodeRef} {...(isContainer ? attributes : {})} style={style}> <div {...(isCont