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