HTML5 Draggable setDragImage 不适用于 Chrome 上的画布
Posted
技术标签:
【中文标题】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中移除画布以上是关于HTML5 Draggable setDragImage 不适用于 Chrome 上的画布的主要内容,如果未能解决你的问题,请参考以下文章