拖拽三部曲：
1、this.dragInit.apply(this, arguments) 作用：初始化对象
2、 function setOptions 作用：设置对象的属性或方法
3、与前面的相比好处是只要初始化一次。
4、然后为函数对象设置属性即可。
View Code
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 <title>一步一步理解拖拽Drag（五）</title>
5 <style type="text/css">
6 *{margin: 0px;padding: 0px;}
7 .moving{opacity: 0.6;filter: alpha(opacity=60); cursor:move}
8 .maindiv{ 960px;border: 1px solid red;margin: 0 auto;}
9 .bigdiv{ 960px;height: 1000px;overflow: hidden;position: relative;}
10 #mmdiv{ 300px;height: 100px;left: 30px;top: 50px;border: 1px solid red;overflow: hidden;}
11 #mmdiv h3{ 100%;height: 30px;line-height: 30px;background: #6666FF;cursor: move;}
12 #mmdiv h3 span{margin-left: 20px;}
13 </style>
14 <script type="text/javascript">
15 var base = {
16 getId: function (id) {
17 return document.getElementById(id);
18 },
19 addEvent: function (elem, type, fn) {
20 if (elem.addEventListener) {
21 elem.addEventListener(type, fn, false);
22 }
23 else if (elem.attachEvent) {
24 elem.attachEvent("on" + type, fn);
25 }
26 else {
27 elem["on" + type] = fn;
28 }
29 },
30 removeEvent: function (elem, type, fn) {
31 if (elem.removeEventListener) {
32 elem.removeEventListener(type, fn, false);
33 }
34 else if (elem.detachEvent) {
35 elem.detachEvent("on" + type, fn);
36 }
37 else {
38 elem["on" + type] = null;
39 }
40 },
41 unDefaultEvent: function (event) {
42 if (event && event.preventDefault) {
43 event.preventDefault();
44 }
45 else {
46 event.returnValue = false;
47 }
48 },
49 page: function (event) {
50 return { x: event.pageX || event.clientX + document.documentElement.scrollLeft, y: event.pageY || event.clientY + document.documentElement.scrollTop };
51 },
52 unSelection: function () {
53 if (document.selection && document.selection.empty) {
54 document.selection.empty();
55 }
56 else if (window.getSelection) {
57 window.getSelection().removeAllRanges();
58 }
59 }
60 };
61
62 function Drag() {
63 this.dragInit.apply(this, arguments);
64 }
65
66 Drag.prototype = {
67 dragInit: function (obj, options) {
68 this.obj = obj;
69 this.obj.style.position = "absolute";
70 this.setOptions(options);
71 this.handle = this.options.handle || obj;
72 this.bigcont = this.options.bigcont || document.documentElement;
73 this.moveCss = this.options.moveCss;
74 this.lock = this.options.lock;
75 this.lockX = this.options.lockX;
76 this.lockY = this.options.lockY;
77 var _this = this;
78 base.addEvent(this.handle, "mousedown", function (event) {
79 _this.startDrap(event);
80 });
81 },
82 setOptions: function (options) {
83 this.options = {
84 handle: "",
85 bigcont: "",
86 lock: false,
87 lockX: false,
88 lockY: false,
89 moveCss: ""
90 };
91
92 for (var p in options) {
93 this.options[p] = options[p];
94 }
95 },
96 startDrap: function (event) {
97 base.unDefaultEvent(event);
98 var _this = this;
99
100 this.disX = base.page(event).x - this.obj.offsetLeft;
101 this.disY = base.page(event).y - this.obj.offsetTop;
102
103 this.mousemoveHandle = function (event) {
104 _this.move(event);
105 };
106
107 this.mouseupHandle = function () {
108 _this.stopDrag();
109 };
110
111 base.addEvent(document, "mousemove", this.mousemoveHandle);
112
113 base.addEvent(document, "mouseup", this.mouseupHandle);
114
115 base.unSelection();
116
117 if (this.obj.setCapture) {
118 this.obj.setCapture(true);
119 }
120 },
121 move: function (event) {
122 base.unDefaultEvent(event);
123 this.obj.className = this.moveCss;
124
125 var x = base.page(event).x - this.disX;
126 var y = base.page(event).y - this.disY;
127
128 var range = {
129 minX: this.bigcont.scrollLeft,
130 minY: this.bigcont.scrollTop,
131 maxX: this.bigcont.scrollWidth - this.obj.offsetWidth,
132 maxY: this.bigcont.scrollHeight - this.obj.offsetHeight
133 };
134
135 x = Math.max(x, range.minX);
136 x = Math.min(x, range.maxX);
137 y = Math.max(y, range.minY);
138 y = Math.min(y, range.maxY);
139
140 if (true == this.lockX && true == this.lockY) {
141 }
142 else if (true == this.lockX) {
143 this.obj.style.left = x + "px";
144 }
145 else if (true == this.lockY) {
146
147 this.obj.style.top = y + "px";
148 }
149 else {
150 this.obj.style.left = x + "px";
151 this.obj.style.top = y + "px";
152 }
153
154 },
155 stopDrag: function () {
156 this.obj.className = "";
157 base.removeEvent(document, "mousemove", this.mousemoveHandle);
158 base.removeEvent(document, "mouseup", this.mouseupHandle);
159 if (this.obj.releaseCapture) {
160 this.obj.releaseCapture(true);
161 }
162 }
163 };
164
165 base.addEvent(window, "load", function () {
166 var tmp = base.getId("mmdiv");
167 var bigdiv = base.getId("bigdiv");
168 var tit = tmp.getElementsByTagName("h3")[0];
169 var b = new Drag(tmp, { "handle": tit, "bigcont": bigdiv, "lockX": false, "lockY": false });
170 var btn = document.getElementsByTagName("input");
171
172 btn[0].onclick = function () {
173
174 b.lockX = false;
175 b.lockY = false;
176 }
177
178 btn[1].onclick = function () {
179
180 b.lockX = true;
181 b.lockY = false;
182 }
183 btn[2].onclick = function () {
184
185 b.lockX = false;
186 b.lockY = true;
187 }
188 btn[3].onclick = function () {
189
190 b.lockX = true;
191 b.lockY = true;
192 }
193 });
194 </script>
195 </head>
196 <body>
197 <div class="maindiv">
198 <div>
199 <input type="button" value="范围拖动" />
200 <input type="button" value="水平拖动" />
201 <input type="button" value="垂直拖动" />
202 <input type="button" value="静止" />
203 </div>
204 <div id="bigdiv" class="bigdiv" style="background-color: Navy">
205 <div id="mmdiv">
206 <h3>
207 <span>标题</span>
208 </h3>
209 </div>
210 </div>
211 </div>
212 </body>
213 </html>