HTML5可拖动的setDragImage在Chrome浏览器上与canvas无法正常工作

Question

我正在尝试在本机HTML5拖放API中使用画布作为我的拖动图像。

问题是它在Firefox上可以正常工作，但在Chrome（58）上不能正常工作，我无法确定问题所在。

代码: https://jsfiddle.net/196urLwd/5/

---

<div id="thing" draggable="true">DRAG ME</div>

---

function onDragStart(event){

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

    canvas.width = 100;
    canvas.height = 20;

    context.fillStyle = '#333333';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#999999';
    context.font = 'bold 13px Arial';
    context.fillText('DRAGGING...', 5, 15);

    event.dataTransfer.setData('text', 'lorem ipsum');
    event.dataTransfer.effectAllowed = 'copy';    
    event.dataTransfer.setDragImage(canvas, -15, 9);

};

var theThing = document.getElementById('thing');
theThing.addEventListener('dragstart', onDragStart, false);

我做错了什么？

- Dominik Serafin

Answer 1

Chrome似乎要求画布(canvas)在dom中存在

document.body.append(canvas);

只需使用一些CSS将其隐藏即可。

canvas{
  position:absolute;
  left:-100%;
}

https://jsfiddle.net/196urLwd/6/

- Musa

---

你也可以使用 setTimeout(()=>canvas.remove(),50) 来在拖动后立即将画布从 DOM 中移除。 - gray