![](/img/trans.png)
[英]setDragImage Doesn't Work In Safari, But Works In Chrome (HTML Drag API)
[英]HTML5 Draggable setDragImage doesn't work with canvas on Chrome
我正在嘗試使用畫布作為本機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);
我究竟做錯了什么?
Chrome似乎要求將畫布放入dom
document.body.append(canvas);
並用一些CSS隱藏它
canvas{
position:absolute;
left:-100%;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.