React-DnD实现多列表拖拽需配置DndProvider和backend，各列表用useDrop设相同itemType（如'LIST_ITEM'），拖项通过beginDrag携带id/listId/index，drop时调用moveItem函数更新数据。

用 React-DnD 实现多列表拖拽，核心在于明确“拖拽源”和“放置目标”的层级关系，并通过 itemType 和 accept 精准控制跨列表行为。它不像 react-beautiful-dnd 那样内置列表间逻辑，需要你主动设计数据流向与状态更新规则。

必须先配置 DndProvider 和 Backend

所有拖拽功能都依赖顶层上下文。React-DnD 要求整个可拖拽区域被 DndProvider 包裹，且指定一个 backend（如 HTML5）：

• 在根组件或布局层引入并包裹：<DndProvider backend={HTML5Backend}>...</DndProvider>
• 确保只包裹一次，避免嵌套多个 Provider 导致上下文冲突
• 移动端需换用 TouchBackend，不能混用

为每个列表定义独立的 itemType 和 DropTarget

多列表之间不自动互通，必须靠统一的 itemType（如 'LIST_ITEM'）打通。每个列表容器要作为 DropTarget，接收该类型项：

Auth0 React

已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。

下载

• 列表组件使用 useDrop，accept 设为 ['LIST_ITEM']
• drop 回调中获取拖入项的原始数据（如 monitor.getItem()），再结合当前列表 ID 更新对应 state
• 避免直接操作 DOM 或硬编码索引，始终以数据驱动视图

每个可拖项需声明 DragSource 并携带上下文信息

任务卡片、模块项等不是“无状态”的，拖拽时必须附带足够信息，让目标列表能识别来源和归属：

• 在 beginDrag 中返回对象，至少含 id、listId（来源列表）、index（原位置）
• 例如：return { id: item.id, listId: 'todo', index: 2 }
• 这样目标列表在 drop 时就能判断是否允许接收（比如禁止跨项目移动），并精准插入

拖拽结束时统一处理数据重排

React-DnD 不自动修改你的数据，你需要在 endDrag 或 drop 中手动同步状态：

• 若支持跨列表移动：从原列表删除，插入到目标列表指定位置
• 若仅允许同列表排序：只调整目标列表内顺序，忽略 listId 变化
• 推荐封装一个 moveItem 工具函数，接收 sourceListId、targetListId、itemId、targetIndex，返回新数据结构