1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>拖拽</title> 6 </head> 7 <style type="text/css"> 8 *{margin:0px;padding:0px;} 9 .content{width:100%;position: relative;} 10 .drag{width:300px;height:200px;background: #ccc;border:1px solid #999;position: absolute;left:100px;top:100px;z-index:2; 11 box-shadow: 1px 10px 10px #ccc;} 12 .drag .dragBar{width:100%;height:30px;background:#666;display: block;cursor:move;border-bottom:1px solid #999;} 13 .drag p{padding:20px;color:#000;} 14 15 .dragShow{width:298px;height:198px;border:1px dashed #999;position: absolute;z-index:1;line-height: 198px;text-align:center;color:#ccc;} 16 .dragShow2{width:298px;height:198px;border:1px dashed #f00;position: absolute;z-index:1;line-height: 198px;text-align:center;color:#f00; 17 font-size:20px;} 18 </style> 19 <script type="text/javascript"> 20 window.onload=function(){ 21 var oContent=document.getElementById('content'); 22 function Drag(dragDom,dragBar){ 23 this.dragDom=document.getElementById(dragDom); 24 this.dragBar=document.getElementById(dragBar); 25 this.disX=0; 26 this.disY=0; 27 this.L=0; 28 this.T=0; 29 this.inint(); 30 this.creatDiv=null; 31 } 32 Drag.prototype={ 33 constructor:Drag, 34 inint:function(){ 35 var _this=this; 36 this.dragBar.onmousedown=function(ev){ 37 var ev=ev||window.event; 38 _this.mouseDownFn(ev); 39 document.onmousemove=function(ev){ 40 var ev=ev||window.event; 41 _this.mouseMoveFn(ev); 42 } 43 document.onmouseup=function(){ 44 _this.mouseUpFn(); 45 document.onmousemove=null; 46 document.onmouseup=null; 47 } 48 return false; 49 } 50 }, 51 mouseDownFn:function(ev){ 52 53 this.disX=ev.clientX-this.dragDom.offsetLeft; 54 this.disY=ev.clientY-this.dragDom.offsetTop; 55 this.creatDiv=document.createElement('div'); 56 this.creatDiv.className='dragShow'; 57 this.creatDiv.style.left=this.dragDom.offsetLeft+'px'; 58 this.creatDiv.style.top=this.dragDom.offsetTop+'px'; 59 this.creatDiv.innerHTML='Drag Box'; 60 oContent.appendChild(this.creatDiv); 61 62 }, 63 mouseMoveFn:function(ev){ 64 //console.log(this.disX) 65 this.L=ev.clientX-this.disX; 66 this.T=ev.clientY-this.disY; 67 if(this.L<0){ 68 this.L=0; 69 }else if(this.L>document.documentElement.clientWidth-this.creatDiv.offsetWidth){ 70 this.L=document.documentElement.clientWidth-this.creatDiv.offsetWidth; 71 } 72 if(this.T<0){ 73 this.T=0; 74 }else if(this.T>document.documentElement.clientHeight-this.creatDiv.offsetHeight){ 75 this.T=document.documentElement.clientHeight-this.creatDiv.offsetHeight; 76 } 77 78 this.creatDiv.style.left=this.L+'px'; 79 this.creatDiv.style.top=this.T+'px'; 80 81 }, 82 mouseUpFn:function(){ 83 oContent.removeChild(this.creatDiv); 84 this.dragDom.style.left=this.L+'px'; 85 this.dragDom.style.top=this.T+'px'; 86 } 87 } 88 extend(ChildDrag.prototype,Drag.prototype); 89 function ChildDrag(dragDom,dragBar){ 90 Drag.call(this,dragDom,dragBar); 91 92 } 93 ChildDrag.prototype.constructor=ChildDrag; 94 95 ChildDrag.prototype.mouseDownFn=function(ev){ 96 97 this.disX=ev.clientX-this.dragDom.offsetLeft; 98 this.disY=ev.clientY-this.dragDom.offsetTop; 99 this.creatDiv=document.createElement('div'); 100 this.creatDiv.className='dragShow2'; 101 this.creatDiv.style.left=this.dragDom.offsetLeft+'px'; 102 this.creatDiv.style.top=this.dragDom.offsetTop+'px'; 103 this.creatDiv.innerHTML='extend Drag Box'; 104 oContent.appendChild(this.creatDiv); 105 106 } 107 function extend(newObj,oldObj){ 108 for(attr in oldObj){ 109 newObj[attr]=oldObj[attr]; 110 } 111 } 112 new Drag('drag1','dragBar1'); 113 new Drag('drag2','dragBar2'); 114 new ChildDrag('drag3','dragBar3'); 115 } 116 </script> 117 <body> 118 <div class="content" id="content"> 119 <div class="drag" id="drag1"> 120 <span class="dragBar" id="dragBar1"></span> 121 <p>Drag box</p> 122 </div> 123 <div class="drag" id="drag2"> 124 <span class="dragBar" id="dragBar2"></span> 125 <p>Drag box</p> 126 </div> 127 <div class="drag" id="drag3"> 128 <span class="dragBar" id="dragBar3"></span> 129 <p>extend Drag box</p> 130 </div> 131 </div> 132 </body> 133 </html>