In this lesson you can learn more: http://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/
From your limited description in your question, it sounds like you are dragging items over a canvas, and this tutorial is perhaps the best result.
This is the actual code that you can paste into a file and open in a browser compatible with HTML5, and it will work:
<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Canvas Drag and Drop Test</title> </head> <body> <section> <div> <canvas id="canvas" width="400" height="300"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> </div> <script type="text/javascript"> var canvas; var ctx; var x = 75; var y = 50; var WIDTH = 400; var HEIGHT = 300; var dragok = false; function rect(x,y,w,h) { ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fill(); } function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); } function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return setInterval(draw, 10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rect(0,0,WIDTH,HEIGHT); ctx.fillStyle = "#444444"; rect(x - 15, y - 15, 30, 30); } function myMove(e){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(e){ if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; } } function myUp(){ dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; </script> </section> </body> </html>
Mike S.
source share