<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>鼠标控制DIV移动</title> <script type="text/javascript"> var _IsMousedown = 0; var _ClickLeft = 0; var _ClickTop = 0; function moveInit(evt) { _IsMousedown = 1; var obj = getObjById('moveDiv'); _ClickLeft = evt.clientX-obj.offsetLeft; _ClickTop = evt.clientY-obj.offsetTop; } function startMove(evt) { if(_IsMousedown == 0){ return; } var obj = getObjById('moveDiv'); obj.style.left = evt.clientX - _ClickLeft; obj.style.top = evt.clientY - _ClickTop; } function stopMove() { _IsMousedown = 0; } function getObjById(id) { return document.getElementById(id); } </script> <style type="text/css" rel="stylesheet"> #movediv { width: 100px; height: 100px; position: absolute; border: 1px solid #000; background: #EAEAEA; } </style> </head> <body> <div id="moveDiv" style="left:20px;top:20px;" onmousedown="moveInit(event);" onmousemove="startMove(event)" onmouseup="stopMove()" onmouseout="stopMove()"> </div> </body> </html>