<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="bucky.js"></script>
</head>
<body>
<section id="main">
<canvas id="canvas" width="600" height="400">
hopefully you dont see this. if you do, get google chrome
</canvas>
</section>
</body>
</html>
Bucky.JS
function doFirst(){
var x = document.getElementById('canvas');
canvas=x.getContext('2d');
window.addEventListener("mousemove", bucky, false);
}
function bucky(e){
// canvas.clearRect(0, 0, 600, 400);
var xPos=e.clientX;
var yPos=e.clientY;
canvas.fillRect(xPos-10, yPos-10, 20, 20);
}
window.addEventListener("load", doFirst, false);
Drag and Drop
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="bucky.css">
<script src="bucky2.js"></script>
</head>
<body>
<section id="leftbox">
I dare you to drag an image in me!
</section>
<section id="rightbox">
<img id="facepic" width="120" height="150" src="images/myface.png">
</section>
</body>
</html>
bucky.css:
#leftbox{
float:left;
width:250px;
height: 250px;
margin: 5px;
border: 3px solid blue;
}
#rightbox{
float:left;
width:250px;
height: 250px;
margin: 5px;
border: 3px solid green;
}
bucky2.js:
function doFirst(){
mypic = document.getElementById('facepic');
mypic.addEventListener("dragstart", startDrag, false);
leftbox=document.getElementById('leftbox');
leftbox.addEventListener("dragenter", function(e){ e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e){ e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
function startDrag(e){
var code='<img id="facepic" width="120" height="150" src="images/myface.png">';
e.dataTransfer.setData('Text', code);
}
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
}
window.addEventListener("load", doFirst, false);
\
