<html>
<meta http-equiv="content-type" charset="utf-8">
<head>
<title>Test9_Move</title>
</head>
<body>
<div id="app">
<canvas id="rectangle" width="100" height="100"></canvas>
</div>
<script language="JavaScript">
onload = function() {
var rect_canvas = document.getElementById("rectangle");
var rect_ctx = rect_canvas.getContext("2d");
rect_ctx.beginPath();
rect_ctx.strokeRect(20, 20, 60, 60);
}
var kao001 = document.getElementById("rectangle");
kao001.style.position = "absolute";
kao001.onmousedown = function(event){
// document.write( "tapped ");
}
kao001.ondragstart = function(event){
return false;
}
kao001.onmousedown = function(event){
document.addEventListener("mousemove",onMouseMove);
}
kao001.onmouseup = function(event){
document.removeEventListener("mousemove",onMouseMove);
}
kao001.onpointerdown = function(event){
document.addEventListener("pointermove",OnMouseMove);
}
kao001.onpointerup = function(event){
document.removeEventListener("pointermove",OnMouseMove);
}
var onMouseMove = function(event){
var x = event.clientX;
var y = event.clientY;
var width = kao001.offsetWidth;
var height = kao001.offsetHeight;
kao001.style.top = (y-height/2) + "px";
kao001.style.left = (x-width/2) + "px";
}
</script>
</body>
</html>
