原生HTML实现树节点拖拽需显式设置draggable="true"、ondragover中preventDefault()并确保目标元素有尺寸、ondrop中通过dataTransfer存取节点标识、用closest定位目标节点、动态校验叶子节点禁止接收子节点。
原生 HTML 实现树节点拖拽，不需要框架也能做，但必须绕开几个关键坑：浏览器默认会阻止 ondrop，ondragover 不取消默认行为就触发不了 ondrop，还有 IE/Edge 对 draggable 属性的兼容细节。下面直接说怎么做、为什么这么写、哪里容易翻车。
draggable="true" 必须显式加在每个可拖节点上
不是父容器设了就行，每个 <li> 或 <div> 节点都得单独加 draggable="true"。Vue/React 组件里常靠绑定 :draggable="!node.noDrag" 动态控制，但原生 HTML 只能硬写或用 JS 批量设置：
document.querySelectorAll('.tree-node').forEach(el => {
el.draggable = true;
});
注意：Chrome/Firefox/Safari 支持良好；IE10+ 也支持，但若节点是 <span> 或内联元素，得先加 display: inline-block 或 block，否则拖拽无效。
ondragover 必须 preventDefault()，否则 ondrop 不触发
这是最常卡住的地方。浏览器默认把 <ul>、<div> 当作“不可放置区域”，即使绑了 ondrop，不拦住 ondragover 的默认行为，ondrop 就永远不会执行。
立即学习“前端免费学习笔记（深入）”；
-
ondragover事件处理器里必须写event.preventDefault() - 只写
event.preventDefault()不够，还得确保该元素有明确的尺寸（比如min-height: 20px），否则视觉上没“落点”，用户松手时事件可能被父级截获 - 别在
ondragenter里写preventDefault()—— 它只用于高亮提示，不是决定是否允许放置的关键环节
ondrop 中如何获取被拖节点和目标位置
ondrop 事件对象本身不带源节点引用，得靠 dataTransfer 存临时数据：
- 在
ondragstart里存节点唯一标识：event.dataTransfer.setData('text/plain', nodeKey) - 在
ondrop里取：const key = event.dataTransfer.getData('text/plain') - 目标位置判断靠
event.target—— 但注意它可能是子元素（比如<span>文本），建议用event.target.closest('.tree-node')向上找最近的节点容器 - 插入逻辑别直接用
appendChild，要区分“插入为子节点”还是“插入为同级前/后节点”，通常靠检测鼠标 Y 坐标与目标节点上下边缘距离来判断 dropPosition
叶子节点禁止接收子节点的判断逻辑放哪
这个限制不能只靠样式隐藏 + 禁用 ondrop，得在交互链路中拦截：
- 在
ondragenter里检查目标节点是否为叶子节点（比如有class="leaf"或data-leaf="true"），如果是，就给目标区域加class="no-drop"并配合 CSS 显示禁用光标 - 在
ondrop开头再校验一次：if (targetNode.hasAttribute('data-leaf')) return，防止绕过 UI 拖入 - 更稳妥的做法是：在
ondragover里根据目标节点类型动态设置event.dataTransfer.dropEffect = 'none'，这样鼠标图标会变禁用状态，用户一眼就知道不能放
真正麻烦的不是拖拽本身，而是节点层级关系变更后，怎么同步更新 DOM 结构、保持缩进线对齐、不破坏已展开/折叠状态——这些没法靠 HTML5 API 自动完成，得自己维护节点数据结构并重绘或 patch。所以简单树用原生 API 可行，复杂业务建议直接用 zTree、Ant Design Tree 或 Vue 的 el-tree，它们内部已经把 dragState、dropPosition、父子校验、动画过渡全封装好了。
