继承的拖拽练习

  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>