canvas - 使用 canvas 和 setDragImage 创建动态拖动图像

Question

显然你可以使用和图像元素或 Canvas 元素 使用 HTML5 的原生拖放功能 setDragImage() .这会覆盖您正在拖动的内容的原生“幻影”图像。

但是我似乎无法让它工作，有谁知道我错过了什么？

var canvas              = document.createElement('canvas');
    context             = canvas.getContext('2d');
    context.height      = '100px';
    context.width       = '200px';
    context.fillStyle   = 'blue';
    context.font        = 'bold 16px Arial';
    context.fillText('hello world', 0, 16);
    context.fillRect(20, 10, 200, 100);

    console.log(canvas);
e.dataTransfer.setDragImage( canvas, 50,50 );

另外，我很惊讶我不能在 createElement() 中使用 div。我猜 div 必须已经存在才能将其用作拖动图像？

var dragIcon = document.createElement('div');
    dragIcon.style.cssText = 'width:200px;height:100px;background-color:red;';

Answer 1

出于某种原因，Canvas 元素需要成为 DOM 的一部分，如本答案 link 中所述.
将样式应用于 Canvas ，使其对用户不可见。一种适用于大多数用例的方法是

canvas.style.position = 'absolute';
canvas.style.left = '-100%';
canvas.style.zIndex = '-100';

然后将 Canvas 元素附加到 DOM。

document.body.append(canvas);