嵌套列表拖拽排序的实现：HTML5 拖拽 API 逻辑实现

HTML5拖拽API需结合dragover/drop/dragenter事件及DOM层级判断才能实现嵌套列表的语义化排序：通过鼠标偏移比例区分“拖入子项”或“插入同级”，动态提供视觉反馈，并按层级正确插入节点，同时限制嵌套深度与父子关系。

HTML5 拖拽 API 本身不直接支持嵌套列表的层级拖拽排序，需结合 dragover、drop 和 dragenter 事件，配合 DOM 层级判断与插入逻辑才能实现“拖入子项”或“插入同级”的语义化排序。

识别目标位置是嵌套还是平级

关键在于区分用户是想把拖拽项放入某个子列表（作为其子项），还是插入到某项的同级位置。这需要监听 dragover 并实时检测鼠标相对于目标元素的偏移比例：

• 若鼠标位于目标 <li> 的下半区域（如 y 偏移 > 60% 高度），且该 <li> 内部存在 <ul class="children">，则标记为“可拖入子列表”；
• 若鼠标靠近顶部或底部边缘（如 y 偏移 80%），则视为“插入前/后同级”；
• 通过 event.preventDefault() 启用 drop，但仅在明确可接受的位置才设置 dataTransfer.dropEffect = "move"。

动态生成视觉反馈提示

用户需要清晰知道当前拖拽将产生什么效果，可通过临时 DOM 元素或 CSS 类实现：

• 在目标 <li> 上添加 drag-over-target 类，并用伪元素显示「→」或「+」图标；
• 若判定为“拖入子列表”，在目标 <li> 底部显示「插入子项」提示条；
• 若判定为“插入同级”，在目标上下边缘分别显示细线 + 「↑ 插入前」或「↓ 插入后」。

执行插入时保持层级结构正确

drop 时不能简单调用 appendChild，必须根据拖拽状态选择插入方式：

立即学习“前端免费学习笔记（深入）”；

• 若目标是子列表容器（如 <ul class="children">），直接 appendChild 到该 <ul>；
• 若目标是普通 <li> 且意图插入同级，则用 before() 或 after()（或 insertBefore）将其插入到目标前后；
• 注意移除被拖拽节点自身（避免复制），并确保它从原父节点中 remove()，再执行新插入——顺序错误会导致 DOM 异常。

处理嵌套深度与边界限制

防止无限嵌套或错位，应在拖拽开始时记录源节点层级（如通过 closest('ul').dataset.depth），并在 dragover 中校验：

• 设定最大嵌套深度（如 depth ≤ 3），超出时不启用 drop 效果；
• 禁止将父级节点拖入其子孙节点（可用 node.contains(draggedNode) 检测）；
• 根级 <ul> 不允许被拖入任何 <li> 内部，只接受同级插入。

不复杂但容易忽略：拖拽过程中频繁触发 dragover，建议用节流或缓存目标节点信息，避免重复计算位置和层级。