1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #div1{width: 200px;height:200px;background-color:red;position: absolute;} 8 </style> 9 <script> 10 window.onload=function(){ 11 var oDiv=document.getElementById('div1'); 12 var disX=0; 13 var disY=0; 14 15 oDiv.onmousedown=function(ev){ 16 var oEvent=ev||event; 17 18 disX=oEvent.clientX-oDiv.offsetLeft; 19 dixY=oEvent.clientY-oDiv.offsetTop; 20 21 document.onmousemove=function(ev){ 22 var oEvent=ev||event; 23 var l=oEvent.clientX-disX; 24 var t=oEvent.clientY-disY; 25 26 if(l<0){ 27 l=0; 28 } 29 else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){ 30 l=document.documentElement.clientWidth-oDiv.offsetWidth; 31 } 32 33 if(t<0){ 34 t=0; 35 } 36 else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){ 37 t=document.documentElement.clientHeight-oDiv.offsetHeight; 38 } 39 40 oDiv.style.left=l+'px'; 41 oDiv.style.top=t+'px'; 42 } 43 44 document.onmouseup=function(ev){ 45 document.onmousemove=null; 46 document.onmouseup=null; 47 } 48 49 return false; 50 } 51 } 52 </script> 53 </head> 54 <body> 55 <div id="div1"> 56 </div> 57 </body> 58 </html>