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，接收该类型项：
- 列表组件使用
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，返回新数据结构
