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

我想出了一個解決方案，我認爲這是不夠好（假設瀏覽器支持畫布）：

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

    var canvas = $('<canvas />').get(0), 
     context = canvas.getContext('2d'); 

    context.fillStyle = 'blue'; 
    context.font = 'bold 16px Arial'; 
    context.fillText('hello world', 0, 16); 

    e.dataTransfer.setDragImage(canvas, -10, -10); 
}; 

Answer 2

這裏是沒有的jQuery有效的解決方案，類似於@約翰的，雖然他沒有爲我工作，我不得不調用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); 
};