使用JavaScript实现页面拖拽功能-优快云博客

   原文链接：
   http://www.cnblogs.com/nalanken/archive/2011/02/18/1957830.html
  
   <html> 
  
   <title></title> 
  
   <script type=
   "text/javascript"
   > 
  
   function 
   Drag(obj) 
  
   { 
  
   var 
   obj = document.getElementById(obj); 
  
   obj.style.position = 
   "absolute"
   ; 
  
   obj.onmousedown = 
   function
   (e) 
  
   { 
  
   e = e || window.event; 
  
   var 
   x = e.offsetX; 
  
   var 
   y = e.offsetY; 
  
   document.onmousemove = 
   function
   (e) 
  
   { 
  
   e = e || window.event; 
  
   obj.style.left = (e.clientX - x) + 
   "px"
   ; 
  
   obj.style.top = (e.clientY - y) + 
   "px"
   ; 
  
   } 
  
   document.onmouseup = 
   function
   () 
  
   { 
  
   document.onmousemove = 
   null
   ; 
  
   obj.onmousedown = 
   null
   ; 
  
   } 
  
   } 
  
   } 
  
   </script> 
  
   </head> 
  
   <body> 
  
   <div id=
   "div"  
   style=
   "background-color:White;width:300px;height:250px;"
   > 
  
   <div id=
   "p" 
   style=
   "cursor:move;background-color:Red;width:300px;height:25px;" 
   onmousedown=
   "Drag('div')"
   >         
  
   </div> 
  
   <div> 
  
   正文   
  
   </div> 
  
   </div> 
  
   </body> 
  
   </html>