0

Javascript を使用して div に 2 つのキャンバスを作成しました。画像付きの別の 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 に答える