可以't将通过Javascript创建的画布指定为放置区域

Can't specify a canvas created through Javascript as a drop area

本文关键字：布指定 区域 创建 Javascript 可以      更新时间：2023-10-04

我使用Javascript在一个div中创建了两个画布。我有另一个带有图像的div。我想把那个图像放到画布上。但我在画布上添加事件时出错了。我正试图将事件设置为"ondragover"answers"ondrop"。但我得到的错误是事件没有定义。

这是我的代码：

<html>
    <head> 
    <script type="text/javascript">
    function dragIt(theEvent) {
theEvent.dataTransfer.setData("Text", theEvent.target.id);   
}
function dropIt(theEvent) {
var theData = theEvent.dataTransfer.getData("Text");
dt = document.getElementById(theData);
theEvent.preventDefault();  
}    
window.onload = function() {     
  var c2 = document.createElement('canvas');
  c2.width = 140;
  c2.height = 140;
  c2.style.cssText = 'position:relative;top:70px;left:498px;border:2px  solid black;';
  var ctx2 = c2.getContext('2d');    
  document.body.appendChild(c2);
  c2.ondragover=event.preventDefault();
  c2.ondrop=dropIt(event);

  var c3 = document.createElement('canvas');
  c3.width = 140;
  c3.height = 140;
  c3.style.cssText = 'position:relative;top:70px;left:502px; border:2px  solid black;';
  var ctx3 = c3.getContext('2d');
  document.body.appendChild(c3);     
  };  
</script>
</head>
    <body>
    <div class="pics">
    <div id="place1">
    <img src="images/211.jpg" width="80" height="80" draggable="true" ondragstart="dragIt(event);" id="pic1" />
    </div>   
    <div style = "position:absolute;top:150px;width:300;height:400;left:500px; border:2px  solid black;"></div>
    </body>
</html>

c2.ondragover=event.preventDefault();
c2.ondrop=dropIt(event);

这些行将执行一些函数，并将其结果分配为事件侦听器。这不是您想要的，您需要分配函数对象本身。此外，执行将失败，因为当时没有event对象——它将在将来某个时候创建，当拖动真正发生时，并作为参数传递给函数。

c2.ondragover = function(event) {
  event.preventDefault();
};
c2.ondrop = dropIt;
相关文章：