0

我使用 Javascript 在 div 中创建了两个画布。我有另一个带有图像的 div。我想将该图像拖放到画布中。但是我在向画布添加事件时遇到错误。我正在尝试设置事件“ondragover”和“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>
4

1 回答 1

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

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

c2.ondragover = function(event) {
  event.preventDefault();
};
c2.ondrop = dropIt;
于 2012-07-16T12:13:44.493 回答