本文详解如何通过 `datatransfer.setdragimage()` 和 `setdata()` 正确实现拖拽时显示自定义预览图、同时确保目标文件夹接收指定图像 url 的完整方案，并指出常见误区与加载时机关键点。
在 Web 页面中实现「拖拽图片到系统文件夹（如 Windows 资源管理器）并自动保存为指定图像」，是许多富媒体应用的实用需求。但需明确一个核心前提：浏览器无法直接控制操作系统级的文件写入行为，但可通过标准 Drag & Drop API 影响拖拽过程中用户所见的视觉反馈（setDragImage）以及最终被系统接收的资源标识（setData）。二者缺一不可，且必须协同使用。
✅ 正确做法：分离预览与数据，预加载图像
setDragImage() 仅设置拖拽过程中的可视化“影子图”，它不影响实际传输内容；而 setData() 才真正决定目标位置（如桌面或资源管理器文件夹）接收到什么资源。对于图像 URL 拖拽，推荐使用 “text/uri-list” 格式 —— 这是操作系统识别并自动下载保存为本地文件的标准协议。
更重要的是：图像必须提前加载完成，否则 setDragImage() 会静默回退到默认拖拽源（即原 元素），导致自定义预览失效。因此， 元素应创建于事件监听器之外，并监听其 load 事件以确保就绪。
以下为生产就绪的完整示例：
