setDragImage 在 Safari 中不起作用，但在 Chrome 中起作用（HTML 拖动 API）

【问题标题】：setDragImage Doesn't Work In Safari, But Works In Chrome (HTML Drag API)setDragImage 在 Safari 中不起作用，但在 Chrome 中起作用（HTML 拖动 API）
【发布时间】：2022-12-07 07:35:14
【问题描述】：

我正在尝试在锚元素上使用 .setDragImage 来在拖动时自定义其图像。出于某种原因，它在 Chrome 中运行良好，但在 Safari 中运行不佳。这是一个例子：

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);
};

&lt;a id="drag" href="javascript:console.log('clicked')"&gt;Drag Me&lt;/a&gt;

请注意，在拖动时，在 Safari 中会显示一个带有链接的特殊框，而在 Chrome 中它会正确显示“拖动信息”

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

事实证明，为了向元素添加拖动图像，您必须将其 draggable 属性设置为 true。

例如

<a href="...">Link</a>

应该

<a href="..." draggable="true">Link</a>

固定示例：

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);
};

&lt;a draggable="true" id="drag" href="javascript:console.log('clicked')"&gt;Drag Me&lt;/a&gt;

【讨论】：