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>
时间： 2024-10-28 23:48:01