HTML5 Draggable setDragImage不适用于Chrome上的画布

问题描述：

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

I'm trying to use canvas as my drag image in native HTML5 Drag And Drop API.

问题是它可以在Firefox上运行，但不能在Chrome(58)上运行，我无法查明问题所在.

The problem is that it works on Firefox but not on Chrome (58) and I can't pinpoint the problem.

<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);

我在做什么错了?

答

Chrome似乎要求画布位于dom中

Chrome seems to require the canvas to be in the dom

document.body.append(canvas);

并用一些CSS隐藏它

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

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

HTML5 Draggable setDragImage不适用于Chrome上的画布

相关推荐