<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </head> <body> <p>aaaaaaaaaaa</p> <div id="one" style="height:100px;100px;background:red;position:absolute;"></div> <script> var odiv=document.getElementById("one"); dra(odiv); function dra(obj){ obj.onmousedown=function(e){ var oe=e||window.event; var $this=this; var l=oe.clientX-$this.offsetLeft; var t=oe.clientY-$this.offsetTop; document.onmousemove=function(e){ var oe=e||window.event; var ol=oe.clientX-l; var ot=oe.clientY-t; if(ol<0) ol=0; if(ot<0) ot=0; if(ot>document.documentElement.clientHeight-$this.offsetHeight) ot=document.documentElement.clientHeight-$this.offsetHeight; if(ol>document.documentElement.clientWidth-$this.offsetWidth) ol=document.documentElement.clientWidth-$this.offsetWidth; $this.style.left=ol+"px"; $this.style.top=ot+"px"; } document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; if($this.releaseCapture) $this.releaseCapture(); } if($this.setCapture){ $this.setCapture(); } if(oe.preventDefault) oe.preventDefault(); else oe.returnValue=false; return false; } } </script> </body> </html>