draggable="false" 仅对 chrome/firefox/edge 有效，safari 必须配合 -webkit-user-drag: none 才能禁用图片拖拽，且需同时处理外层链接和文本选中问题。
draggable="false" 是关闭图片拖拽的起点，但不是终点
图片元素 <img> 默认可拖拽，这不是 bug，是浏览器原生行为。只写 draggable="false" 能解决大部分场景，但在 Safari 中大概率失效——它会直接忽略该属性对 <img> 的控制。所以必须搭配 CSS 才算真正“关死”。
为什么只加 draggable="false" 还能拖出图片到桌面
常见错误现象：<img src="logo.png" draggable="false"> 在 Safari（包括 iOS 和 macOS 最新版）里依然能长按拖出图片，或拖进新标签页打开。这是因为 Safari 对 draggable 属性的实现不一致，仅靠 HTML 属性无法覆盖其默认拖放逻辑。
-
draggable="false"是语义正确且必要的第一步，但仅对 Chrome/Firefox/Edge 有效 - Safari 实际生效的是
-webkit-user-drag: none，必须显式声明 - 如果图片外层有链接（
@#@#@#@#@#@#@#@#@#@0），还需给<a></a>同样加样式，否则拖拽源会变成链接 URL
完整写法：HTML + CSS 双保险
推荐直接在 <img> 上内联写死，避免样式被覆盖或动态渲染时丢失：
@@##@@
说明：
-
draggable="false"阻止鼠标长按触发拖拽流程（Chrome/Firefox/Edge 依赖此项） -
user-drag: none是标准属性，目前仅 Firefox 支持，但写上无害 -
-webkit-user-drag: none是 Safari/Chrome/Edge 实际起效的关键项 - 不推荐用 class 外部引入，因为框架（如 React/Vue）可能 strip 掉内联样式或属性
额外注意：文字内容和移动端不能靠这一套
如果图片旁有标题、说明文字等文本内容，它们虽不可拖，但被选中后仍可能触发拖拽（尤其在 Chrome 中）。此时需补充 user-select: none：
style="user-drag: none; -webkit-user-drag: none; user-select: none;"
而移动端（iOS Safari / Android Chrome）根本不会触发 dragstart，这套方案完全无效——长按保存、分享菜单等系统级行为无法禁用，也不应尝试拦截。
真正容易被忽略的点是：禁用拖拽 ≠ 禁用右键保存或长按菜单。所有方案都只影响鼠标拖拽路径，对另存为、复制图片、分享按钮等毫无约束力。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
