基于该元素的html代码为可拖动元素自定义幽灵图像

Question

如何为可拖动元素创建基于该元素的html代码的自定义幽灵图像?

例如，假设您想手动创建默认的幽灵图像。您可以使用可拖动元素的html代码来构造幽灵图像。但我认为我在这里错过了一些东西(见下面的代码)。知道是什么吗?

draggable.addEventListener('dragstart', event => {
const draggedEl = event.target
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

const data =
"data:image/svg+xml;utf8," +
encodeURIComponent(
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px'>" +
"<div xmlns='http://www.w3.org/1999/xhtml'>" + 
draggedEl.outerHTML + 
"</div>" +
"</div>" +
"</foreignObject>" +
"</svg>"
)


const img = new Image()
img.src = data
img.style.zIndex = 1
img.onload = function() {
ctx.drawImage(img, 0, 0)
}

event.dataTransfer.setDragImage(img, 0, 0)
})

我不希望在这个实现中使用任何库。

编辑:有时自定义鬼图像确实显示。然而，这是非常不可靠的。

Answer 1

我最终从头开始实现元素的拖动行为-从而覆盖默认行为-而不是尝试使用event.dataTransfer.setDragImage(img, 0, 0)设置自定义鬼图像。

示例参见Stack Overflow post: Style drag ghost element

然而，任何有助于理解为什么原始代码不能工作的帮助仍然是感激的。