1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="gb2312" /> 5 <title></title> 6 <style type="text/css"> 7 *{ margin:0; padding:0;} 8 html,body{ overflow:hidden;} 9 .drag-box{ width:200px; height:200px; background:#ccc; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px;} 10 .drag-title{ height:24px; background:#000; cursor:move;} 11 </style> 12 </head> 13 <body> 14 <div class="drag-box" id="dBox"> 15 <div class="drag-title"> 16 17 </div> 18 </div> 19 20 <script type="text/javascript"> 21 var drag = function(dragObj){ 22 var drag = typeof dragObj === 'string' ? document.getElementById(dragObj) : dragObj; 23 var dTitle = drag.getElementsByTagName('div')[0]; 24 var disX = disY = 0; 25 var isDrag = false; 26 27 dTitle.onmousedown = function(evt){ 28 evt = evt || window.event; 29 isDrag = true; 30 31 disX = evt.clientX - drag.offsetLeft; 32 disY = evt.clientY - drag.offsetTop; 33 34 this.setCapture && this.setCapture(); 35 36 return false; 37 } 38 39 document.onmousemove = function(evt){ 40 evt = evt || window.event; 41 if(!isDrag) return false; 42 43 drag.style.margin = 0; 44 drag.style.left = evt.clientX - disX + 'px'; 45 drag.style.top = evt.clientY - disY + 'px'; 46 47 return false; 48 } 49 50 document.onmouseup = window.onblur = dTitle.onlosecapture = function(){ 51 isDrag = false; 52 dTitle.releaseCapture && dTitle.releaseCapture(); 53 } 54 } 55 </script> 56 57 <script type="text/javascript"> 58 drag('dBox'); 59 </script> 60 </body> 61 </html>