javascript - ondragstart - 带有动态元素的 setDragImage

Question

我正在尝试创建一个动态元素，当您拖动图像时该元素会附加到光标:

<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTe_ojzFXmnZU1d5pK8XwIwKiRB3vE_8ifC7U4DXtzduwIlvgTLPzbTCw" id="img"/>

<div id="text" style="position: absolute; left: -9999px;">hello</div>

document.getElementById('img').ondragstart = function(e){
    var text = document.getElementById('text');
    text.innerHTML = 'foo';
    e.dataTransfer.setDragImage(text, 0, 0);
};

由于元素无法动态创建，例如document.createElement、克隆等，我必须将其放在屏幕之外，如上所示。

显然我对这个解决方案并不满意。你们有什么想法吗？如果有帮助的话，我可以使用 jQuery。

http://jsfiddle.net/WdkW5/2/

Answer 1

这是一个无需 jQuery 即可工作的解决方案，类似于 @Johan 的解决方案，尽管他对我不起作用，但我必须调用 img.src = canvas.toDataURL();

document.getElementById('img').ondragstart = function(event){

    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    context.fillStyle = 'blue';
    context.font = 'bold 16px Arial';
    context.fillText('hello world', 0, 16);
    const img = new Image();
    img.src = canvas.toDataURL();

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