ondrag仅在元素已拖动时低频触发，需先设draggable="true"；它只作用于源元素，须与ondragstart、ondragover（必preventdefault）、ondrop等协同使用，不可单独依赖。

ondrag 属性本身不会让元素可拖拽，也不会自动触发拖放流程——它只是监听「正在拖动中」这个状态的事件，前提是元素已经处于被拖动状态。没设置 draggable="true" 或不是原生可拖拽元素（如 <a></a>、<img>），ondrag 永远不会执行。

---

ondrag 什么时候真正触发

• 只有在用户已「抓起」一个可拖动元素，并持续移动鼠标时，每约 350ms 触发一次

• 它只在拖动源元素上触发，不会在目标区域（如 droptarget）触发

• 不代表拖动成功或进入/离开/释放，它只是“拖着没松手”的中间状态反馈

• 必须确保元素有 draggable="true"（文本节点、<div> 等默认不可拖）<li><p><code>ondrag 是事件处理属性，等价于 element.addEventListener("drag", handler)

• 若同时用了 ondragstart，ondrag 会在其后首次触发（约 350ms 后），不是立刻连续触发

---

为什么 ondrag 经常“没反应”

• 元素没加 draggable="true"，浏览器直接忽略拖动意图
• 忘了阻止 ondragover 的默认行为：目标区域没写 event.preventDefault()，导致 ondrop 失效，连带影响整个拖放链路（ondragenter/ondragleave 可能也不稳定）
• 把 ondrag 错误绑在目标容器上——它只对被拖的源元素有效
• 在移动端或某些 WebView 中，ondrag 支持不一致（iOS Safari 对非图像/链接元素的 draggable 支持有限）

---

怎么配合其他事件一起用才靠谱

ondrag 单独意义有限，必须和以下事件协同：

• ondragstart：设置 dataTransfer 数据，标记拖动开始（比如 event.dataTransfer.setData("text/plain", "item-123")）

  

  多面-AI面试

  一款面向招聘与求职场景的AI面试平台，可通过智能化面试流程辅助企业评估候选人并帮助求职者进行面试练习。

  下载

• ondragover：在目标区域上必须调用 event.preventDefault()，否则无法触发 ondrop

• ondrop：真正接收数据的地方，从 event.dataTransfer.getData() 取值

• ondragend：清理 UI 状态（比如还原透明度、移除高亮）

• 不要依赖 ondrag 做关键逻辑（如位置计算、状态同步），它触发频率低且不精确

• 如果需要实时位置反馈，改用 mousemove + dragstart 标记状态更可靠

• ondrag 的事件对象是 DragEvent，但 dataTransfer 在这里只读，不能修改

---

ondrag 是拖放 API 里最易被误解的环节：它看起来像“拖动中”，实际只是个低频心跳信号。真正控制流程的是 ondragstart 和 ondragover 的配合，而容易被忽略的关键点，永远是那句必须写的 event.preventDefault()。