<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 {100px; height:100px; background:red; position:absolute;} #div2 {400px; height:300px; background:#CCC; position:relative;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var disX=0; var disY=0; oDiv.onmousedown=function (ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0) { l=0; } else if(l>oDiv2.offsetWidth-oDiv.offsetWidth) { l=oDiv2.offsetWidth-oDiv.offsetWidth; } if(t<0) { t=0; } else if(t>oDiv2.offsetHeight-oDiv.offsetHeight) { t=oDiv2.offsetHeight-oDiv.offsetHeight; } oDiv.style.left=l+'px'; oDiv.style.top=t+'px'; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; }; return false; }; }; </script> </head> <body> <div id="div2"> <div id="div1"></div> </div> </body> </html>