(转)完全面向对象的拖动DIV
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>DragTheDIV</title>
6<script language="javascript" type="text/javascript" src="DragTheDIV.js"></script>
7</head>
8
9<body>
10<div id="d1" style="position:absolute;background:#eeeeee;top:20px;left:30px;width:200px;height:200px;">
11 <div id="title" style="position:relative;top:0px;left:0px;width:100%;height:30px;background:#ccddee;">标题栏</div>
12</div>
13
14<div id="d2" style="position:absolute;background:#dddddd;top:50px;left:50px;width:300px;height:300px;">拖我吧</div>
15<script language="javascript" type="text/javascript">
16
17var Browser = {
18 isFF : window.navigator.appName.indexOf("Netscape") != -1 ? true : false
19};
20if(Browser.isIE)
21{
22 var HTMLElement = new Function();
23 var HTMLDivElement = new Function();
24 var HTMLUnknownElement = new Function();
25}
26if(!Browser.isIE)
27{
28 function SearchEvent()
29 {
30 var func=SearchEvent.caller;
31 while(func!=null)
32 {
33 var arg=func.arguments[0];
34 if(arg)
35 {
36 if(String(arg.constructor).indexOf('Event') > -1)
37 {
38 return arg;
39 }
40 }
41 func=func.caller;
42 }
43 return null;
44 }
45 window.constructor.prototype.__defineGetter__
46 (
47 "event",
48 function()
49 {
50 return SearchEvent();
51 }
52 )
53 HTMLElement.prototype.__defineGetter__
54 (
55 "currentStyle",
56 function()
57 {
58 return this.ownerDocument.defaultView.getComputedStyle(this,null);
59 }
60 );
61 HTMLElement.prototype.__defineGetter__
62 (
63 "runtimeStyle",
64 function()
65 {
66 return this.style;
67 }
68 );
69 HTMLElement.prototype.attachEvent = function(eName,handler)
70 {
71 var eType = eName.substring(2,eName.length);
72 this.addEventListener(eType,handler,true);
73 }
74 if(Event)
75 {
76 Event.prototype.__defineGetter__
77 (
78 "srcElement",
79 function()
80 {
81 return this.target;
82 }
83 );
84 }
85}
86function $()
87{
88 if(!arguments.length) return;
89 var elements = [];
90 for(var i = 0;i < arguments.length;i++)
91 {
92 elements.push(document.getElementById(arguments[i]));
93 if(Browser.isIE)
94 {
95 if(!elements[i].expand)
96 {
97 Global.copy(elements[i],HTMLElement.prototype);
98 Global.copy(elements[i],elements[i].getType().prototype);
99 elements[i].expand = true;
100 }
101 }
102 }
103 if(elements.length == 1) return elements[0];
104 return elements;
105}
106var Global = {
107 copy : function(without,object)
108 {
109 if(arguments.length != 2) return;
110 if(!without || !object) return;
111 for(var index in object)
112 {
113 if(without[index]) continue;
114 without[index]=object[index];
115 }
116 }
117}
118Global.copy(HTMLElement.prototype,{
119 getType : function()
120 {
121 if(this.tagName.toUpperCase() != "DIV") return HTMLUnknownElement;
122 return HTMLDivElement;
123 }
124});
125Global.copy(HTMLDivElement.prototype,{
126 parent : function()
127 {
128 var Parent = this.offsetParent,current;
129 if(Parent.tagName.toUpperCase() == "BODY" || Parent.tagName.toUpperCase() == "HTML")
130 {
131 current = this;
132 }
133 else
134 {
135 current = Parent;
136 }
137 return current;
138 },
139 drag : function()
140 {
141 var _this = this.parent();
142 var current = this;
143 var doc = document.documentElement || document.body;
144 this.runtimeStyle.cursor = "move";
145 function down(e)
146 {
147 Global.down = true;
148 Global.left = event.clientX - _this.offsetLeft;
149 Global.top = event.clientY - _this.offsetTop;
150 if(_this.setCaptrue) _this.setCaptrue();
151 else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
152 document.body.onmousemove = function(e)
153 {
154 if(Global.down)
155 {
156 _this.runtimeStyle.left = Math.min(Math.max((event.clientX - Global.left),0),doc.clientWidth - _this.clientWidth) + "px";
157 _this.runtimeStyle.top = Math.min(Math.max((event.clientY - Global.top),0),doc.clientHeight - _this.clientHeight) + "px";
158 }
159 return false;
160 }
161 document.body.onmouseup = function(e)
162 {
163 Global.down = false;
164 if(_this.releaseCapture) _this.releaseCapture();
165 else if(window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
166 document.onmousemove = null;
167 document.onmouseup = null;
168 return false;
169 }
170 return false;
171 }
172 this.attachEvent("onmousedown",down);
173 }
174});
175
176$("title").drag();
177$("d2").drag();
178</script>
179</body>
180</html>
181
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5<title>DragTheDIV</title>
6<script language="javascript" type="text/javascript" src="DragTheDIV.js"></script>
7</head>
8
9<body>
10<div id="d1" style="position:absolute;background:#eeeeee;top:20px;left:30px;width:200px;height:200px;">
11 <div id="title" style="position:relative;top:0px;left:0px;width:100%;height:30px;background:#ccddee;">标题栏</div>
12</div>
13
14<div id="d2" style="position:absolute;background:#dddddd;top:50px;left:50px;width:300px;height:300px;">拖我吧</div>
15<script language="javascript" type="text/javascript">
16
17var Browser = {
18 isFF : window.navigator.appName.indexOf("Netscape") != -1 ? true : false
19};
20if(Browser.isIE)
21{
22 var HTMLElement = new Function();
23 var HTMLDivElement = new Function();
24 var HTMLUnknownElement = new Function();
25}
26if(!Browser.isIE)
27{
28 function SearchEvent()
29 {
30 var func=SearchEvent.caller;
31 while(func!=null)
32 {
33 var arg=func.arguments[0];
34 if(arg)
35 {
36 if(String(arg.constructor).indexOf('Event') > -1)
37 {
38 return arg;
39 }
40 }
41 func=func.caller;
42 }
43 return null;
44 }
45 window.constructor.prototype.__defineGetter__
46 (
47 "event",
48 function()
49 {
50 return SearchEvent();
51 }
52 )
53 HTMLElement.prototype.__defineGetter__
54 (
55 "currentStyle",
56 function()
57 {
58 return this.ownerDocument.defaultView.getComputedStyle(this,null);
59 }
60 );
61 HTMLElement.prototype.__defineGetter__
62 (
63 "runtimeStyle",
64 function()
65 {
66 return this.style;
67 }
68 );
69 HTMLElement.prototype.attachEvent = function(eName,handler)
70 {
71 var eType = eName.substring(2,eName.length);
72 this.addEventListener(eType,handler,true);
73 }
74 if(Event)
75 {
76 Event.prototype.__defineGetter__
77 (
78 "srcElement",
79 function()
80 {
81 return this.target;
82 }
83 );
84 }
85}
86function $()
87{
88 if(!arguments.length) return;
89 var elements = [];
90 for(var i = 0;i < arguments.length;i++)
91 {
92 elements.push(document.getElementById(arguments[i]));
93 if(Browser.isIE)
94 {
95 if(!elements[i].expand)
96 {
97 Global.copy(elements[i],HTMLElement.prototype);
98 Global.copy(elements[i],elements[i].getType().prototype);
99 elements[i].expand = true;
100 }
101 }
102 }
103 if(elements.length == 1) return elements[0];
104 return elements;
105}
106var Global = {
107 copy : function(without,object)
108 {
109 if(arguments.length != 2) return;
110 if(!without || !object) return;
111 for(var index in object)
112 {
113 if(without[index]) continue;
114 without[index]=object[index];
115 }
116 }
117}
118Global.copy(HTMLElement.prototype,{
119 getType : function()
120 {
121 if(this.tagName.toUpperCase() != "DIV") return HTMLUnknownElement;
122 return HTMLDivElement;
123 }
124});
125Global.copy(HTMLDivElement.prototype,{
126 parent : function()
127 {
128 var Parent = this.offsetParent,current;
129 if(Parent.tagName.toUpperCase() == "BODY" || Parent.tagName.toUpperCase() == "HTML")
130 {
131 current = this;
132 }
133 else
134 {
135 current = Parent;
136 }
137 return current;
138 },
139 drag : function()
140 {
141 var _this = this.parent();
142 var current = this;
143 var doc = document.documentElement || document.body;
144 this.runtimeStyle.cursor = "move";
145 function down(e)
146 {
147 Global.down = true;
148 Global.left = event.clientX - _this.offsetLeft;
149 Global.top = event.clientY - _this.offsetTop;
150 if(_this.setCaptrue) _this.setCaptrue();
151 else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
152 document.body.onmousemove = function(e)
153 {
154 if(Global.down)
155 {
156 _this.runtimeStyle.left = Math.min(Math.max((event.clientX - Global.left),0),doc.clientWidth - _this.clientWidth) + "px";
157 _this.runtimeStyle.top = Math.min(Math.max((event.clientY - Global.top),0),doc.clientHeight - _this.clientHeight) + "px";
158 }
159 return false;
160 }
161 document.body.onmouseup = function(e)
162 {
163 Global.down = false;
164 if(_this.releaseCapture) _this.releaseCapture();
165 else if(window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
166 document.onmousemove = null;
167 document.onmouseup = null;
168 return false;
169 }
170 return false;
171 }
172 this.attachEvent("onmousedown",down);
173 }
174});
175
176$("title").drag();
177$("d2").drag();
178</script>
179</body>
180</html>
181