Home/ Questions/Q 8241625
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T20:53:39+00:00

I have created two canvases in a div using Javascript. I have another div

  • 0

I have created two canvases in a div using Javascript. I have another div with an image. I want to drop that image into the canvas. But I am getting error in adding events to the canvases. I am trying to set the events “ondragover” and “ondrop”. But I am getting the error that event is not defined.

Here is my code:

<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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    These lines will execute some functions, and assign the result of that as an event listener. That’s not what you want, you need to assign the function object itself. Also, the execution will fail because there is no event object that time – it will be created somewhen in the future, when the drag really happens, and be passed to the function as an argument.

    c2.ondragover = function(event) {
  event.preventDefault();
};
c2.ondrop = dropIt;
    • 0