##
<!DOCTYPE html> <html> <head runat="server"> <title></title> <style> #mov{ background-color: #00DDCC; width: 200px; height: 200px; top: 100px; left: 100px; position: absolute; } </style> <script> var mouseX, mouseY; var objX, objY; var isDowm = false; function mouseDown(obj, e) { var div = document.getElementById("mov"); obj.style.cursor = "move"; objX = div.offsetLeft; objY = div.offsetTop; mouseX = e.clientX; mouseY = e.clientY; isDowm = true; } function mouseMove(e) { var div = document.getElementById("mov"); var x = e.clientX; var y = e.clientY; if (isDowm) { div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px"; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var y = e.clientY; var div = document.getElementById("mov"); div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px"; div.style.cursor = "default"; isDowm = false; } } </script> </head> <body> <div id="mov" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)"></div> </body> </html>
