dragstart未触发需检查draggable="true"属性是否正确设置在可拖元素上，且必须监听该元素的dragstart事件并调用dataTransfer.setData()传非空字符串。
拖拽排序时 dragstart 事件没触发？检查 draggable 属性和事件监听位置
HTML 原生拖拽 API 要求目标元素显式设置 draggable="true"，否则 dragstart 根本不会触发。常见错误是只给容器加监听，却忘了在每个可拖项上设属性。
-
draggable必须是字符串"true"（不是布尔值true），写成draggable或draggable={true}（React 中）都不生效 - 监听要挂在实际被拖的元素上，而不是父容器——除非你用事件委托，但得确保
event.target是可拖项 - Chrome/Firefox 对
dragstart中设置dataTransfer.setData()有严格要求：至少设一个非空字符串，例如event.dataTransfer.setData('text/plain', 'item-1')，否则拖拽会静默失败
如何用 dragover 和 drop 实现视觉反馈与插入定位
仅靠 drop 事件无法知道该插到哪个位置，必须配合 dragover 阻止默认行为并计算鼠标相对于列表项的位置。
-
dragover里必须调用event.preventDefault()，否则drop永远不会触发 - 用
event.clientY对比每个<li>的getBoundingClientRect().top和.bottom，判断光标在项的上半还是下半，决定插入点在该项前或后 - 视觉反馈建议用
border-top: 2px dashed #007bff插入线，而不是改变整个项背景色——后者容易干扰用户对原始顺序的感知
自定义元素（customElements.define）里封装拖拽逻辑要注意什么？
在 connectedCallback 中绑定事件没问题，但必须确保元素已渲染完成、子节点存在，且避免重复绑定。
- 不要在
constructor里绑事件——此时 DOM 还没挂载，this.children为空 - 用
WeakMap存储每个实例的拖拽状态（如当前拖动项 ID、临时插入索引），避免闭包内存泄漏 - 如果自定义元素支持
slot内容，注意slotchange后需重新扫描可拖子项，否则动态插入的内容无法响应拖拽 - 移动端不支持原生 drag API，得 fallback 到
touchstart/move/end，但逻辑不能和桌面端混写——建议用if ('ontouchstart' in window)区分
SortableJS 和原生 API 哪个更靠谱？
原生 API 控制力强、无依赖，但兼容性差（iOS Safari 拖拽卡顿）、细节多（比如 dragend 不触发时要手动清理样式）。SortableJS 解决了大部分边界问题，但体积大、API 抽象层深。
立即学习“前端免费学习笔记（深入）”；
- 简单内部管理后台、Chrome/Edge 主力浏览器场景，直接用原生更轻量、调试直观
- 需要支持 IE11 或复杂嵌套列表（如树形拖拽），
SortableJS的group和handle选项省心很多 - 注意
SortableJS默认会修改 DOM 结构（移动节点），若你依赖MutationObserver监听变化，得在onEnd回调里处理，而不是靠DOMNodeInserted
拖拽排序真正难的不是开始拖，而是精确判定插入点、处理快速连续拖放、以及跨容器时的数据一致性——这些地方原生 API 没有银弹，得靠业务侧补逻辑。
