如何放置画布上的文字和图像？（Firefox 41.0.1）

当我将文本“Canvas”或图像“testimage.png”标记并将其拖放到画布上时，以下代码应在控制台中输出'hello'。但它不起作用。如何放置画布上的文字和图像？（Firefox 41.0.1）

当我将eventListener添加到textarea时，它确实有效。但它确实应该放在画布上。：/

我不认为这是不可能的。

怎么办？（HTML文件是在我的域名，以及图像文件在同一目录下的同一个域。）

<html><head> 
<script type="application/javascript"> 
function someInits() { 
    document.getElementById('canvas').addEventListener("drop", function(event) { 
     console.log('hello'); //event.target.id 
     //event.target.style.opacity = ""; 
     }, false); 
    } 
</script> 
</head> 
<body onload="someInits();"> 
<hr>Canvas: <br> 
<canvas id="canvas" width="300" height="300"></canvas> 
<hr> 
<img src="http://example.com/testimage.png"> 
</body> 
</html>

来源

2016-01-13 John

在Firefox中，你需要阻止为了告诉dragover事件的默认行为您正在处理它的浏览器。

More info on how to handle drag events

function someInits() { 
 

 
    // block the default dragover 
 
    document.getElementById('canvas').addEventListener("dragover", function(event) { 
 
    event.preventDefault(); 
 
    }, false); 
 

 
    //handle the drop 
 
    document.getElementById('canvas').addEventListener("drop", function(event) { 
 
    event.preventDefault(); 
 
    this.style.backgroundColor = 'pink'; 
 
    console.log('hello'); 
 
    }, false); 
 

 
} 
 

 
someInits();

canvas{border: 1px solid;}

<hr>Canvas:<br> 
 
<canvas id="canvas" width="300" height="100"></canvas> 
 
<hr> 
 
<img id="img" src="http://lorempixel.com/200/200" draggable="true" />

来源

2016-01-13 08:16:20 Kaiido

@约翰问题2，在给定的链路，见[本段]（https://developer.mozilla.org/en-US/docs/ Web/Guide/HTML/Drag_operations＃droptargets）：“网页或应用程序的大部分区域都无法放置数据，因此，这些事件的默认处理方式是不允许放置。”对于问题1，根据MDN它是。对于textareas，我不确定，但我想他们是“有效的下降目标”，按照定义是，就像一些''元素。 – Kaiido

此外，**重要说明**图像默认为可拖动，但如果要拖动非标准HTML元素，则还必须在dragstart事件中启动事件'dataTransfer'属性：https：/ /developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#draggableattribute – Kaiido

是的，你会习惯这种形式，我甚至没有把你发送到[specs]（https： //html.spec.whatwg.org/multipage/interaction.html#drag-and-drop-processing-model） – Kaiido

如何放置画布上的文字和图像？ （Firefox 41.0.1）

回答

相关问题

如何放置画布上的文字和图像？（Firefox 41.0.1）