HTML Drag API：setDragImage在Safari失效但Chrome可用的问题

我尝试给锚点元素使用setDragImage自定义拖拽时的显示图像，这个功能在Chrome中正常工作，但在Safari里完全没效果。拖拽时Chrome会正确显示自定义的"Drag Info"，而Safari依然显示默认的链接样式框。

原问题代码 #

JavaScript

const drag = document.getElementById("drag");

const testEl = document.createElement("div");
testEl.innerText = "Drag Info";

drag.ondragstart = (event)=>{
  document.body.appendChild(testEl);
  
  event.dataTransfer.setDragImage(testEl, 0, 0);
  
  setTimeout(()=>{
    testEl.remove();
  }, 1);
};

HTML

<a id="drag" href="javascript:console.log('clicked')">Drag Me</a>

问题原因 #

1. Safari对<a>这类默认可拖拽元素有特殊优先级，会优先使用自身默认的拖拽样式，忽略setDragImage的设置。
2. 原代码中在dragstart回调里才添加自定义元素，并在1ms后立即移除，Safari可能还未完成拖拽图像的渲染和捕获，就已经丢失了目标元素。

解决方案 #

修复后的代码

提前将自定义拖拽元素添加到DOM中，通过绝对定位隐藏避免影响布局，同时确保元素在拖拽完成前不会被过早移除：

JavaScript

const drag = document.getElementById("drag");

// 提前创建并挂载自定义拖拽元素，用绝对定位隐藏
const testEl = document.createElement("div");
testEl.innerText = "Drag Info";
testEl.style.position = "absolute";
testEl.style.left = "-9999px";
testEl.style.top = "-9999px";
document.body.appendChild(testEl);

drag.ondragstart = (event) => {
  // 直接使用已存在的DOM元素设置拖拽图像
  event.dataTransfer.setDragImage(testEl, 0, 0);
};

// 页面卸载时清理元素，避免内存泄漏
window.addEventListener('beforeunload', () => {
  testEl.remove();
});

HTML

<a id="drag" href="javascript:console.log('clicked')">Drag Me</a>

额外优化（可选）

如果上述方案仍不生效，可以显式给锚点元素添加draggable="true"属性，强制启用拖拽自定义：

<a id="drag" draggable="true" href="javascript:console.log('clicked')">Drag Me</a>

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