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的解决方案，类似于@ Johan＆s;虽然他没有为我工作，我不得不调用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);
};

ondragstart - 带动态元素的setDragImage

2 个答案: