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

【问题标题】：Creating a dynamic drag image with canvas and setDragImage使用 canvas 和 setDragImage 创建动态拖动图像
【发布时间】：2015-12-28 19:40:59
【问题描述】：

显然，您可以通过 HTML5 的原生拖放setDragImage() 使用 图像元素 或 canvas 元素。这会覆盖您拖动的本机“幻影”图像。

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

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;';

【问题讨论】：

对于问题的第一部分，canvas 的 context2d 没有 width 和 height 属性，你应该设置 canvas 的一个。但这仍然适用于您给定的代码：jsfiddle.net/45k8z4kr/1 至少它在 FF 中确实如此...... chrome 中似乎存在一个错误，您需要将 dataURL 作为图像元素的 src 传递：jsfiddle.net/76Lc1tas跨度>
对于第二部分，specs 表示如果元素参数不是图像，“将拖动数据存储位图设置为从给定元素生成的图像”。对于不可见的元素，这不会产生任何结果。（旧的规范更清楚，并声明“图像应该是一个可见节点，拖动图像将由此创建。”）

标签： canvas drag-and-drop html5-canvas

【解决方案1】：

出于某种原因，Canvas 元素需要成为 DOM 的一部分，如本答案 link 中所述。

将样式应用于画布，使其对用户不可见。一种适用于大多数用例的方法是

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

然后将 Canvas 元素附加到 DOM。

document.body.append(canvas);

【讨论】：