draggable="false"对<img>元素不是完全有效，Safari完全忽略它，Chrome/Firefox也存在兼容性波动，必须配合-webkit-user-drag: none和user-drag: none才能可靠禁用拖拽。
draggable="false" 对图片有效吗？
对 <img> 元素，draggable="false" 是起点，但不是终点。Safari 完全忽略它，Chrome/Firefox 也存在兼容性波动——单独写这行属性，在多数现代浏览器里仍能拖出图片到桌面或新标签页。
必须搭配 CSS 才算真正锁死：
-
style="-webkit-user-drag: none; user-drag: none;"—— 这是核心双保险，前者覆盖 Chrome/Safari/Edge，后者是标准属性（Firefox 支持） -
ondragstart="event.preventDefault()"可作为 JS 补漏，但仅建议加在关键图片上，避免全局监听影响性能 - 别用
pointer-events: none替代，它禁的是点击，不拦拖拽
文字内容被拖拽怎么办？
文字本身不可拖（除非被选中后手动拖），但用户常误以为“拖拽文字”是正常行为。实际触发的是「选中 + 拖动选区」，根源在 user-select。
要彻底阻断：
立即学习“前端免费学习笔记（深入）”；
- 给含文本的容器（如
<p>、<h3>、<div>）加style="user-select: none;" - 注意：这和
user-drag: none完全无关，前者管选中，后者管拖拽动作 - 如果容器内有可交互子元素（比如按钮或链接），需单独设
user-select: text或auto，否则点击失效
React/Vue 里 draggable 属性消失怎么办？
框架会自动 strip 掉非标准 HTML 属性。比如 Vue 模板里写 <img :draggable="false">，最终渲染可能不带该属性；React 中 draggable={false} 在某些版本下也会被忽略。
稳妥做法：
- 用原生 DOM 操作补属性：
imgEl.setAttribute('draggable', 'false') - CSS 方案更可靠：统一给图片类加全局样式
.no-drag { -webkit-user-drag: none; user-drag: none; } - 动态插入的元素，确保在
useEffect/mounted钩子中同步设置属性+样式
为什么禁止拖拽后还能右键另存为？
这是常见误解。draggable="false" 和相关 CSS 只阻止「鼠标按住拖拽」行为，不影响右键菜单里的「图片另存为」或「复制图片」——这两者属于浏览器上下文菜单功能，无法通过前端属性禁用。
如果业务真需要屏蔽下载，唯一可行路径是：
- 用 Canvas 渲染图片（失去右键菜单，但 SEO 和可访问性受损）
- 服务端加 Referer / Token 鉴权，拦截非常规请求
- 接受事实：前端无法真正阻止资源被获取，只能提高门槛
拖拽控制的边界就在这里：它只约束鼠标直接拖动这一交互路径，别指望它变成防盗盾。
