(转)完全面向对象的拖动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
17
var 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
<!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
17
var Browser = {
18
isFF : window.navigator.appName.indexOf("Netscape") != -1 ? true : false19
};20
if(Browser.isIE)21
{22
var HTMLElement = new Function();23
var HTMLDivElement = new Function();24
var HTMLUnknownElement = new Function();25
}26
if(!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
}86
function $()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
}106
var 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
}118
Global.copy(HTMLElement.prototype,{119
getType : function()120
{121
if(this.tagName.toUpperCase() != "DIV") return HTMLUnknownElement;122
return HTMLDivElement;123
}124
});125
Global.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
else134
{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
