draggable="false" 经常失效是因为它仅对原生可拖拽元素（如 img、带 href 的 a）有效，且 Safari 完全忽略该属性；必须配合 -webkit-user-drag: none（Chrome/Safari/Edge）和 user-drag: none（仅 Firefox），再加 user-select: none 防文字误拖，必要时用 dragstart.preventDefault() 兜底。
draggable="false" 为什么经常失效？
它只对原生可拖拽元素起作用，比如 <img>、带 href 的 <a>，而对 <div> 或文本内容加了也无感。更关键的是 Safari 完全忽略 draggable="false" 对图片的控制；Chrome/Firefox 在某些渲染路径（如 CSS transform 后）也可能漏掉。必须搭配 CSS 才算真正生效。
-webkit-user-drag: none 是实际起效的关键
user-drag: none 是标准属性，但目前仅 Firefox 支持；真正跨浏览器生效的是 -webkit-user-drag: none，它直接抑制 WebKit/Blink 内核（Chrome/Safari/Edge）的拖拽手势启动逻辑。
- 单个元素：写内联样式
style="-webkit-user-drag: none; user-drag: none;" - 全局禁用（慎用）：
body { -webkit-user-drag: none; user-drag: none; }，但会连合法拖拽区域（如文件上传框）一起禁掉 - 别用
pointer-events: none替代——它不拦拖拽，只禁点击和 hover
文字被“拖拽”其实是选中后拖动，得靠 user-select
用户常把「选中一段文字再拖动」当成拖拽行为，根源在 user-select。这和 user-drag 完全无关：前者管是否能选中，后者管是否能拖动已选中的内容。
- 给含文本的容器（如
<p>、<h3>）加style="user-select: none;" - 如果容器里有按钮或链接，需单独设子元素
user-select: text或auto，否则点击失效 - 动态插入的文本节点，也要确保该样式同步应用，否则 IntersectionObserver 触发时可能已晚
JS 补漏：dragstart.preventDefault() 要按需加
HTML + CSS 双保险后，极少数场景（如右键另存为后再手动拖拽）仍可能绕过。此时监听 dragstart 并调用 event.preventDefault() 是最底层拦截方式。
立即学习“前端免费学习笔记（深入）”；
- 只建议加在关键图片或敏感区域，避免全局监听影响性能
- React/Vue 中注意事件委托：框架可能剥离原生属性，推荐在
useEffect或mounted钩子里用 DOM 操作补监听器 - 不要对整个
body绑定，否则会干扰合法拖拽组件（如富文本编辑器、看板工具）
真正麻烦的不是代码怎么写，而是不同浏览器对同一套方案的响应不一致——Safari 忽略属性、Firefox 不认前缀、Chrome 偶尔跳过重绘后的样式。所以“禁止拖拽”从来不是加一行就完事的事，而是要分层覆盖：HTML 属性打底，CSS 双前缀锁死，user-select 防误触，JS 监听兜底。漏掉任何一层，都可能在某个用户那里突然失效。
