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

Posted 2023-05-08

【中文标题】HTML5 Draggable setDragImage 不适用于 Chrome 上的画布

【英文标题】：HTML5 Draggable setDragImage doesn't work with canvas on Chrome

【发布时间】：2017-10-03 01:18:40

【问题描述】：

我正在尝试在原生 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);

我做错了什么？

【参考方案1】：

Chrome 似乎要求画布在 dom 中

document.body.append(canvas);

然后用一些 css 隐藏它

canvas
  position:absolute;
  left:-100%;

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

【讨论】：

你也可以通过setTimeout(()=>canvas.remove(),50)在你拖动后从dom中移除画布