用途：该技能面向使用 dnd-kit 库构建 React 拖放功能的场景，重点解决同一组件既要作为可排序元素、又要作为可放置目标的问题，例如看板中列的排序与卡片跨列移动。
主要能力：提供同时使用 useSortable 与 useDroppable 的实现模式。核心思路是按拖拽上下文做条件判断：拖动条目时容器仅作为放置目标；拖动容器时容器作为可排序元素。通过 useDndContext() 检测当前拖拽对象，并据此切换 ref。
必要用法：在容器组件中同时调用 useSortable 与 useDroppable，用 useDndContext() 获取 active，根据 id 前缀判断类型，例如容器用 container-、条目用 item-，再条件性地应用 setDroppableRef 或 setSortableRef，并仅在拖动容器时绑定 attributes 与 listeners。更新容器内条目时必须创建新对象，例如用 setContainers(prev => prev.map(...)) 返回新数组，直接 push 不会触发重渲染。
适用场景：看板列排序与卡片移动、文件夹重组与文件移动、播放列表排序与添加歌曲、任务列表排序与跨列表移动。
限制：资料仅给出上述模式与要点，未提供完整安装命令、版本要求、浏览器兼容性、性能数据或收费信息，这些暂未提供。详细示例可参考 implementation-patterns.md 与 state-management.md。