<!doctype html> <html> <head> <title></title> <script type="text/javascript"> var mouseX; var objX; var isDowm = false; //是否按下鼠标 function mouseDown(obj, e) { obj.style.cursor = "move"; mouseX = e.clientX; isDowm = true; } function mouseMove(e) { var div = document.getElementById("div1"); var x = e.clientX; if (isDowm) { div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px"; } } function mouseUp(e) { if (isDowm) { var x = e.clientX; var div = document.getElementById("div1"); div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px"; mouseX = x; div1.style.cursor = "default"; isDowm = false; } } </script> </head> <body> <div id="div1" style="background-color: Green; border: 1px solid red; height: 300px; top: 100px; left: 100px; width: 300px; position: absolute;" onmousedown="mouseDown(this,event)" onmousemove="mouseMove(event)" onmouseup="mouseUp(event)"> </div> </body> </html>
原文：http://www.cnblogs.com/manyu/p/6127867.html