如何放置畫布上的文字和圖像？（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）