如何修改拖拽元素的源？实现低清图拖拽替换为高清图至Photoshop

你遇到的核心问题有两个：一是DataTransfer.files对应的FileList是只读对象，无法直接修改；二是dragstart是同步触发的事件，异步操作（比如你的fetch）会在事件结束后才完成，导致修改无法生效。

可以通过预加载高清图片资源+直接操作DataTransfer.items的方式实现需求，具体步骤如下：

• 提前预加载高清图片的Blob数据，避免在dragstart事件中做异步请求
• 在dragstart事件中，清空默认的拖拽数据，然后将预加载好的高清File对象添加到DataTransfer.items中

完整代码示例 #

<img id="MYTEST" draggable="true" src="img/image_low.jpg" />

<script type="text/javascript">
// 预加载高清图片，全局缓存File对象
let highResImageFile;

// 页面加载时预加载资源
window.addEventListener('load', async () => {
  const res = await fetch("image_high.jpg");
  const blob = await res.blob();
  highResImageFile = new File([blob], 'image_high.jpg', { type: "image/jpeg" });
});

const dragStartHandler = (e) => {
  // 阻止默认拖拽行为，避免原低清图片被加入拖拽数据
  e.preventDefault();
  
  // 清空现有拖拽数据
  e.dataTransfer.clearData();
  
  // 添加高清图片File对象到拖拽项
  if (highResImageFile) {
    e.dataTransfer.items.add(highResImageFile);
    // 额外添加text/uri-list类型，提升部分应用的兼容性
    e.dataTransfer.setData('text/uri-list', URL.createObjectURL(highResImageFile));
  }
};

// 绑定拖拽事件
document.getElementById('MYTEST').addEventListener('dragstart', dragStartHandler);
</script>

关键说明 #

• 预加载：把异步请求放在页面加载阶段完成，确保dragstart触发时高清资源已经就绪
• DataTransfer.items.add()：这是修改拖拽数据的正确方式，相比直接操作files，items支持添加自定义File对象
• 兼容性处理：额外设置text/uri-list类型，确保Photoshop等桌面应用能识别拖拽的图片资源
• 资源清理：如果页面长时间运行，记得在合适时机调用URL.revokeObjectURL()释放创建的临时URL资源

内容的提问来源于stack exchange，提问作者akio