Question

显然，您可以使用图片元素或画布元素与HTML5的原生拖放setDragImage()。这会覆盖原生＆＃39; ghosted＆＃39;你正在拖拽的形象。

然而，我似乎无法让它发挥作用，有人知道我错过了什么吗？

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.style.position = 'absolute';
canvas.style.left = '-100%';
canvas.style.zIndex = '-100';

然后将 Canvas 元素附加到 DOM。

document.body.append(canvas);

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

1 个答案: