首页 > 代码库 > 继承的拖拽练习
继承的拖拽练习
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>
继承的拖拽练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。