登录Monorepo 架构全解析：从概念到落地的完整指南
一、什么是 Monorepo？ 1.1 核心概念 Monorepo（单体仓库）是一种软件开发架构模式，它将多个相关项目、应用或模块的源代码集中存储在单一的代码仓库中进行管理。与传统的多仓库（Multi
在上一篇技术分享中，我们聚焦于useDrag钩子实现Todo任务项的拖动触发逻辑，完成了任务的选中与拖拽启动功能。而拖拽交互的闭环，必然离不开放置接收环节——当用户将任务拖拽到目标位置时，如何精准判断拖动类型（单个/多个）并执行对应的排序逻辑，才是确保交互流畅性的核心。本文将详细拆解这一环节的实现思路，重点解析批量排序操作的设计与hover事件的逻辑处理。
核心问题：区分拖动类型，匹配差异化逻辑
任务拖拽的放置接收环节，首要解决的问题是“识别当前拖动场景”。当用户拖拽任务时，存在两种典型场景：单个任务独立拖动、多个已选中任务批量拖动。这两种场景的排序逻辑存在本质差异：单个任务只需处理“源位置”与“目标位置”的双向交换；而批量任务则需要先提取所有选中项，再整体插入目标位置，同时保持选中项内部的相对顺序。
针对这一差异，我们的技术方案分为两步：一是新增批量排序的Context操作类型，专门处理多任务排序逻辑；二是在useDrop的hover事件中添加类型判断，根据是否为批量拖动执行对应逻辑。
第一步：实现批量排序操作BATCH_REORDER_TODOS
单个任务排序可通过简单的数组元素交换实现，但批量排序需要处理“选中项提取-目标位置计算-选中项插入”三个核心步骤。为此，我们新增BATCH_REORDER_TODOS操作类型，封装完整的批量排序逻辑。
1.1 核心设计思路
批量排序的核心需求是：将所有选中的任务作为一个整体，移动到目标位置，并保持选中项在原始数组中的相对顺序。具体思路如下：
- 边界校验：排除“无选中任务”“目标位置越界”等无效场景；
- 选中项排序：确保选中任务的顺序与原始数组一致，避免排序混乱；
- 分离数组：将原始任务数组拆分为“选中任务”和“非选中任务”两个集合；
- 目标位置校准：计算选中任务在非选中数组中的实际插入位置；
- 数组重组：将选中任务整体插入目标位置，形成新的任务数组。
1.2 完整代码实现与解析
以下是BATCH_REORDER_TODOS在Context reducer中的实现代码，关键步骤已添加详细注释：
case ActionTypes.BATCH_REORDER_TODOS:
{
// 从action中获取目标位置索引和移动方向
const { destinationIndex, direction } = action.payload;
// 边界条件检查：无选中任务/目标位置越界则返回原状态
if (!state.selectedTodos.length || destinationIndex < 0 || destinationIndex >= state.todos.length) {
return state;
}
// 复制原始任务数组，避免直接修改state
let newTodos = [...state.todos];
// 关键：按选中任务在原始数组中的顺序重新排序
// 通过findIndex匹配id，确保排序与原始位置一致
let tempSelectedTodos = [...state.selectedTodos].sort((a, b) => {
return newTodos.findIndex(todo => todo.id === a.id) - newTodos.findIndex(todo => todo.id === b.id);
});
// 创建选中任务ID集合，用于快速过滤非选中任务
const selectedTodoIds = new Set(tempSelectedTodos.map(todo => todo.id));
// 从原始数组中移除所有选中任务，得到非选中任务数组
const nonSelectedTodos = newTodos.filter(todo => !selectedTodoIds.has(todo.id));
// 计算选中任务在非选中数组中的实际插入位置
// 原理：通过目标位置的任务ID，找到其在非选中数组中的索引
let actualDestinationIndex = nonSelectedTodos.findIndex(todo => todo.id === state.todos[destinationIndex].id);
// 确保目标位置不超出非选中数组范围
actualDestinationIndex = Math.min(actualDestinationIndex, nonSelectedTodos.length);
// 根据移动方向微调目标位置：UP表示向上移动，需将插入位置后移一位
if(direction === 'UP'){
actualDestinationIndex++;
}
// 重组数组：将选中任务整体插入目标位置
const resultTodos = [
...nonSelectedTodos.slice(0, actualDestinationIndex), // 目标位置前的非选中任务
...tempSelectedTodos, // 选中任务整体插入
...nonSelectedTodos.slice(actualDestinationIndex) // 目标位置后的非选中任务
];
// 返回新状态，保持选中状态方便用户继续操作
return {
...state,
todos: resultTodos,
selectedTodos: [...state.selectedTodos],
}
}
1.3 配套Action创建函数
为了在组件中调用批量排序逻辑，我们需要创建对应的action创建函数，将目标位置和移动方向作为参数传递：
// 批量重新排序任务的action创建函数
batchReorderTodos: (destinationIndex, direction) => {
dispatch({
type: ActionTypes.BATCH_REORDER_TODOS,
payload: { destinationIndex, direction },
});
},
第二步：优化useDrop的hover事件，区分拖动类型
useDrop钩子的hover事件是处理“放置接收”的关键——当拖拽的任务悬停在目标任务上时，需要实时计算位置并触发排序。我们在此处添加“是否为批量拖动”的判断，分别执行单个和批量排序逻辑。
2.1 核心交互逻辑
hover事件的核心需求是“精准判断插入位置”：
- 批量拖动时：根据鼠标在目标任务上的垂直位置（上半部分/下半部分），确定整体插入方向（上方/下方）；
- 单个拖动时：直接匹配源任务与目标任务的位置，执行交换排序。
同时需要避免“自我交换”问题——当拖拽的任务与目标任务为同一任务（单个拖动），或目标任务属于选中任务集合（批量拖动）时，不执行任何操作。
2.2 完整hover事件代码实现
hover: (item, monitor) => {
if (item.selected) {
// 场景一：批量拖拽逻辑
// 避免将选中任务拖到自身集合内
if (item.selectedTodos.some(selectedTodo => selectedTodo.id === todo.id)) return;
// 获取目标任务在原始数组中的索引
const destinationIndex = todos.findIndex(oneTodo => oneTodo.id === todo.id);
// 计算鼠标在目标任务元素上的垂直偏移量
// monitor.getClientOffset().y：鼠标在视口中的Y坐标
// divRef.current.getBoundingClientRect().top：目标元素顶部在视口中的Y坐标
const hoverOffset = monitor.getClientOffset().y - divRef.current.getBoundingClientRect().top;
// 目标元素的半高，作为判断插入方向的阈值
const halfHeight = divRef.current.offsetHeight / 2;
if (hoverOffset > halfHeight) {
// 鼠标在目标元素下半部分：将选中任务插入到目标元素下方
batchReorderTodos(destinationIndex, 'UP');
} else {
// 鼠标在目标元素上半部分：将选中任务插入到目标元素上方
batchReorderTodos(destinationIndex, 'DOWN');
}
} else {
// 场景二：单个拖拽逻辑
// 避免任务自我交换
if (item.id === todo.id) return;
// 关键：通过ID获取实时索引，而非依赖初始索引（避免快速拖拽导致的索引混乱）
const sourceIndex = todos.findIndex(oneTodo => oneTodo.id === item.id);
const destinationIndex = todos.findIndex(oneTodo => oneTodo.id === todo.id);
// 执行单个任务排序
reorderTodos(sourceIndex, destinationIndex);
}
},
2.3 关键技术点解析
上述代码中，有两个极易踩坑的技术点需要重点关注：
-
索引获取方式：放弃“依赖初始索引”的方式，改用
findIndex通过任务ID获取实时索引。这是因为快速拖拽过程中，任务数组顺序会动态变化，初始索引会失效，而ID作为唯一标识能确保索引精准。 - 批量拖动的位置判断：通过“鼠标垂直偏移量+元素半高”的组合，实现“hover上半部分插上方，hover下半部分插下方”的自然交互。这种设计符合用户直觉，避免了“拖拽到任务边缘时位置判断模糊”的问题。
功能闭环：从拖动到放置的交互优化
通过新增批量排序操作和优化hover事件逻辑，我们完成了Todo任务拖拽的完整功能闭环。实际使用中，用户可通过以下流程完成拖拽操作：
- 单个任务拖拽：直接拖动目标任务，悬停到目标位置即可完成排序；
- 批量任务拖拽：先选中多个任务（可通过Ctrl/Shift键辅助），拖动任意选中任务，整体悬停到目标位置，根据鼠标位置完成批量插入。
这种实现方式既保证了操作的灵活性，又通过边界校验（如越界判断、自我交换排除）确保了功能的稳定性。下图为批量拖拽的实际效果演示：
总结
本文通过“批量排序操作封装+hover事件类型区分”的技术方案，解决了Todo任务拖拽中“放置接收”的核心问题。核心亮点在于：
- 用ID作为索引匹配的唯一标识，避免了动态排序中的索引混乱问题；
- 批量排序时保持选中项的原始顺序，符合用户操作预期；
- 基于鼠标位置的精细判断，提升了拖拽交互的流畅性。
