禁用图片或链接拖拽应优先为<img>显式设置draggable="false"，对含图链接补充user-drag: none和ondragstart="event.preventDefault()"，但无法阻止移动端长按保存或系统级拖文件行为。
页面里图片或链接被意外拖拽，本质是浏览器默认启用了拖放（drag）行为。禁用它不需要复杂框架，直接用原生 HTML 属性和少量 CSS 就能解决，但要注意不同元素的处理方式不一致。
给 <img> 加 draggable="false" 是最直接的方法
很多人以为加个 ondragstart="return false" 就行，其实更可靠的是 HTML5 原生属性 draggable。默认情况下，<img> 是可拖拽的（尤其在 Chrome/Firefox），而 <a> 和普通文本默认不可拖拽——这点常被忽略。
正确写法：
<img src="logo.png" draggable="false" alt="logo">
注意：draggable="false" 必须显式写出，设为 "false" 字符串，不是布尔值 false；设成 draggable="" 或省略该属性，都会恢复默认可拖拽行为。
立即学习“前端免费学习笔记（深入）”；
禁用链接拖拽要同时处理 <a> 的 href 和 drag 事件
纯文字链接本身不可拖拽，但一旦 <a> 包含 <img>，或者用户长按/右键误操作，仍可能触发拖拽。更关键的是：如果 <a href="xxx"> 指向本地文件（如 href="report.pdf"），Chrome 会允许拖出该文件——这是浏览器级行为，仅靠前端无法完全拦截，但可大幅降低误触概率。
稳妥做法：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 对含图片的链接，内部
<img>仍需加draggable="false" - 添加内联样式
style="user-drag: none; -webkit-user-drag: none;"（兼容旧版 Safari） - 必要时监听
ondragstart并阻止，默认行为：onDragStart="event.preventDefault()"
示例：
<a href="doc.pdf"><img src="icon-pdf.png" draggable="false" style="user-drag: none; -webkit-user-drag: none;" ondragstart="event.preventDefault()"></a>
user-select: none 和 user-drag: none 不是一回事
有人混淆“禁止选中文字”和“禁止拖拽”。user-select: none 只影响鼠标选中文本/图片框的行为，不影响拖放 API 触发；而 user-drag: none（非标准但 Safari/Chrome 支持）才真正抑制拖拽手势的启动。不过这个 CSS 属性兼容性差，不能单独依赖。
所以优先级应是：
- 所有
<img>强制加draggable="false" - 对敏感容器（如整个卡片区域）加
ondragstart="event.preventDefault()" -
user-drag: none当作补充，不作主逻辑
全局禁用？别这么做。给 <body> 加 ondragstart 会干扰所有合法拖放交互（比如富文本编辑器、看板拖动），得不偿失。
移动端长按触发“保存图片”也属于拖拽链路
在 iOS/Android 上，长按图片弹出“保存图像”菜单，底层也是 drag 事件的延伸。仅靠 draggable="false" 无法禁用这个原生菜单——这是系统级行为，Web 标准不授权网页禁用它。
如果你的目标是防止图片被轻易保存，draggable="false" 没用；需要换思路：用 CSS 背景图替代 <img> 标签，或服务端加水印、限制 Referer。但请注意，这些都只是增加门槛，无法真正阻止截图或录屏。
真正容易被忽略的点是：拖拽禁用只作用于用户主动手势，不影响 JavaScript 主动调用 dataTransfer 或 DragEvent。如果页面本身用了拖放库（如 SortableJS），别盲目加 draggable="false"，否则会破坏功能。
