如何实现拖拽功能

原生 dragstart 不触发的根本原因是元素未正确设置 draggable="true" 或被父级阻止事件/样式拦截；必须显式绑定 dragstart 且调用 dataTransfer.setData()，否则拖拽静默失败。

HTML 原生拖拽（drag/drop API）能用，但默认行为多、事件粒度粗、跨浏览器表现不一致，实际项目中建议优先用 Draggable 库或监听 pointerdown+pointermove 自行实现更可控的拖拽逻辑。

为什么原生 dragstart 事件经常不触发？

根本原因是：只有被设置为可拖拽的元素（draggable="true"）且绑定了 dragstart 处理函数，才可能触发；但更常见的是——父级或祖先元素阻止了默认行为，或 CSS 设置了 user-select: none / pointer-events: none，导致鼠标事件没传到目标元素上。

• draggable 属性必须显式写成 draggable="true"，draggable（无值）在部分浏览器中不生效
• 图片、链接等内置可拖拽元素会自动触发，但自定义 div 必须手动加属性和事件
• event.dataTransfer.setData() 必须在 dragstart 中调用，否则后续 drop 拿不到数据
• Chrome/Firefox 对 dataTransfer.effectAllowed 和 dropEffect 的校验较严格，设错会导致 drop 事件不触发

drop 事件不执行？检查这三件事

drop 是最常“静默失败”的环节：它依赖 dragover 事件被显式取消默认行为，否则浏览器直接拒绝投放。

• 必须在 dragover 回调里写 event.preventDefault()，只写 event.stopPropagation() 不够
• dragenter 事件不是必须的，但可用于高亮投放区域；注意它可能被频繁触发，别在里面做重操作
• 如果目标是空容器（比如没有子元素的 div），需确保它有宽高（min-height 或内容撑开），否则无法命中

用 pointerdown+pointermove 替代原生拖拽更可靠

绕过原生 API 的限制，自己管理拖拽状态，兼容性好、响应快、支持 touch/mouse/pen 统一处理。

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

• 在 pointerdown 中记录初始位置、计算偏移量，并调用 setPointerCapture() 防止指针移出丢失事件
• pointermove 中更新元素 transform: translate(x, y)，避免重排（比直接改 left/top 更高效）
• pointerup 或 pointercancel 时释放 capture 并提交最终位置
• 需要手动判断是否进入目标区（比如用 elementFromPoint() 或碰撞检测），但逻辑完全自主

原生拖拽的坑集中在事件链断裂和样式干扰上，真正上线前务必在真机 touch 环境下验证；如果只是移动 UI 元素，手写 pointer 方案反而更快定位问题。