firefox拖拽自动打开新窗口是原生行为，因datatransfer.setdata()使用"text"或"text/plain"类型触发；需改用非text开头的type如"custom/drag-item"，并全局body.ondrop拦截兜底，移动端原生drag不可靠应选用interact.js等库。

Firefox 拖拽自动打开新窗口的根本原因

这不是 bug，是 Firefox 的原生行为：当 dataTransfer.setData() 使用 "text" 或 "text/plain" 作为 type 时，Firefox 会将其识别为“可搜索文本”，松手后自动触发搜索（文字）或打开新窗口（图片/链接）。即使你在 dragstart、dragover、drop 里都调用了 preventDefault()，也拦不住。

必须改掉 setData 的 type 字符串

核心解法就是避开 Firefox 的关键词陷阱。它对 type 字符串敏感，不是内容敏感。

• setData("text", "xxx")、setData("text/plain", "xxx") → 必然触发新窗口/搜索
• setData("application/json", JSON.stringify({id: 1})) → 安全，但 Safari 可能不支持读取
• setData("custom/drag-item", "item-123") → 推荐，自定义 type 最稳妥
• setData("text/x-custom", "item-123") → 兼容性更好，既非 text 开头，又保留语义

只要 type 不以 "text" 开头（包括 "text/html"），Firefox 就不会启动默认投放逻辑。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

body 级 ondrop 拦截是兜底手段

即便 type 改了，某些场景（比如拖拽未绑定 dragstart 的元素、第三方组件内部漏处理）仍可能触发默认行为。此时需在全局层面拦截：

• 在 Vue 的 created 或 mounted 钩子中执行：
  document.body.ondrop = e => { e.preventDefault(); e.stopPropagation(); };
• 注意：不能只写 addEventListener('drop', ...)，因为 Firefox 的内置投放发生在捕获阶段，ondrop 属性级绑定更早生效
• 该监听只需设一次，无需移除；但若页面动态切换路由，建议在销毁前清理（避免内存泄漏）

移动端和跨窗口场景别指望 draggable

Firefox 的这个问题只存在于桌面端。但更要紧的是：你正在调试的这个 draggable 行为，在 iOS Safari 和 Android Chrome 上根本不会触发 dragstart；跨 iframe 或新窗口时，dataTransfer 为空、drop 不触发——这些都不是兼容性问题，是浏览器主动禁止。如果业务真有强拖拽需求，别死磕原生 API，用 interact.js 或 SortableJS 这类已做平台适配的库更省心。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！