HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

draggable="false"对元素不是完全有效，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></p>、<h3></h3>、<div>）加 <code>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 鉴权，拦截非常规请求
• 接受事实：前端无法真正阻止资源被获取，只能提高门槛

拖拽控制的边界就在这里：它只约束鼠标直接拖动这一交互路径，别指望它变成防盗盾。