(转)完全面向对象的拖动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![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
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![](/Images/OutliningIndicators/None.gif)
17
var Browser = {
18
isFF : window.navigator.appName.indexOf("Netscape") != -1 ? true : false
19
};
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
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![](/Images/OutliningIndicators/None.gif)
176
$("title").drag();
177
$("d2").drag();
178
</script>
179
</body>
180
</html>
181![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/None.gif)
7
![](/Images/OutliningIndicators/None.gif)
8
![](/Images/OutliningIndicators/None.gif)
9
![](/Images/OutliningIndicators/None.gif)
10
![](/Images/OutliningIndicators/None.gif)
11
![](/Images/OutliningIndicators/None.gif)
12
![](/Images/OutliningIndicators/None.gif)
13
![](/Images/OutliningIndicators/None.gif)
14
![](/Images/OutliningIndicators/None.gif)
15
![](/Images/OutliningIndicators/None.gif)
16
![](/Images/OutliningIndicators/None.gif)
17
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
20
![](/Images/OutliningIndicators/None.gif)
21
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/InBlock.gif)
25
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
26
![](/Images/OutliningIndicators/None.gif)
27
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/InBlock.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/InBlock.gif)
35
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
36
![](/Images/OutliningIndicators/InBlock.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
40
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
43
![](/Images/OutliningIndicators/InBlock.gif)
44
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
45
![](/Images/OutliningIndicators/InBlock.gif)
46
![](/Images/OutliningIndicators/InBlock.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
50
![](/Images/OutliningIndicators/InBlock.gif)
51
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/InBlock.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
58
![](/Images/OutliningIndicators/InBlock.gif)
59
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
60
![](/Images/OutliningIndicators/InBlock.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/InBlock.gif)
65
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
66
![](/Images/OutliningIndicators/InBlock.gif)
67
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
68
![](/Images/OutliningIndicators/InBlock.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
71
![](/Images/OutliningIndicators/InBlock.gif)
72
![](/Images/OutliningIndicators/InBlock.gif)
73
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
74
![](/Images/OutliningIndicators/InBlock.gif)
75
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
76
![](/Images/OutliningIndicators/InBlock.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/InBlock.gif)
79
![](/Images/OutliningIndicators/InBlock.gif)
80
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
81
![](/Images/OutliningIndicators/InBlock.gif)
82
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
83
![](/Images/OutliningIndicators/InBlock.gif)
84
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
85
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
86
![](/Images/OutliningIndicators/None.gif)
87
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
88
![](/Images/OutliningIndicators/InBlock.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/InBlock.gif)
91
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/InBlock.gif)
94
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
95
![](/Images/OutliningIndicators/InBlock.gif)
96
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
97
![](/Images/OutliningIndicators/InBlock.gif)
98
![](/Images/OutliningIndicators/InBlock.gif)
99
![](/Images/OutliningIndicators/InBlock.gif)
100
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
101
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
102
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
103
![](/Images/OutliningIndicators/InBlock.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
106
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
107
![](/Images/OutliningIndicators/InBlock.gif)
108
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
109
![](/Images/OutliningIndicators/InBlock.gif)
110
![](/Images/OutliningIndicators/InBlock.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
113
![](/Images/OutliningIndicators/InBlock.gif)
114
![](/Images/OutliningIndicators/InBlock.gif)
115
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
116
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
117
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
118
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
124
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
125
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
126
![](/Images/OutliningIndicators/InBlock.gif)
127
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
128
![](/Images/OutliningIndicators/InBlock.gif)
129
![](/Images/OutliningIndicators/InBlock.gif)
130
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
131
![](/Images/OutliningIndicators/InBlock.gif)
132
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
133
![](/Images/OutliningIndicators/InBlock.gif)
134
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
135
![](/Images/OutliningIndicators/InBlock.gif)
136
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
137
![](/Images/OutliningIndicators/InBlock.gif)
138
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
139
![](/Images/OutliningIndicators/InBlock.gif)
140
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
141
![](/Images/OutliningIndicators/InBlock.gif)
142
![](/Images/OutliningIndicators/InBlock.gif)
143
![](/Images/OutliningIndicators/InBlock.gif)
144
![](/Images/OutliningIndicators/InBlock.gif)
145
![](/Images/OutliningIndicators/InBlock.gif)
146
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
147
![](/Images/OutliningIndicators/InBlock.gif)
148
![](/Images/OutliningIndicators/InBlock.gif)
149
![](/Images/OutliningIndicators/InBlock.gif)
150
![](/Images/OutliningIndicators/InBlock.gif)
151
![](/Images/OutliningIndicators/InBlock.gif)
152
![](/Images/OutliningIndicators/InBlock.gif)
153
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
154
![](/Images/OutliningIndicators/InBlock.gif)
155
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
156
![](/Images/OutliningIndicators/InBlock.gif)
157
![](/Images/OutliningIndicators/InBlock.gif)
158
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
159
![](/Images/OutliningIndicators/InBlock.gif)
160
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
161
![](/Images/OutliningIndicators/InBlock.gif)
162
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
163
![](/Images/OutliningIndicators/InBlock.gif)
164
![](/Images/OutliningIndicators/InBlock.gif)
165
![](/Images/OutliningIndicators/InBlock.gif)
166
![](/Images/OutliningIndicators/InBlock.gif)
167
![](/Images/OutliningIndicators/InBlock.gif)
168
![](/Images/OutliningIndicators/InBlock.gif)
169
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
170
![](/Images/OutliningIndicators/InBlock.gif)
171
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
172
![](/Images/OutliningIndicators/InBlock.gif)
173
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
174
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
175
![](/Images/OutliningIndicators/None.gif)
176
![](/Images/OutliningIndicators/None.gif)
177
![](/Images/OutliningIndicators/None.gif)
178
![](/Images/OutliningIndicators/None.gif)
179
![](/Images/OutliningIndicators/None.gif)
180
![](/Images/OutliningIndicators/None.gif)
181
![](/Images/OutliningIndicators/None.gif)