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，建议用节流或缓存目标节点信息，避免重复计算位置和层级。
