can't specify a canvas created through javascript as a drop area

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>

Answers


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;

Need Your Help

Why are these divs overlapping?

html css wmd-editor

I putting wmd on my website. After putting code in and giving it a spin i see this image below.

wpf Rounded corner combobox

wpf xaml combobox

I am new to wpf and i wanted to change the combobox style to this however all i could do it change the highlight color