拖拽三部曲：
1、可以指定标题栏作为移动区域，默认整个移动物体都可以拖动
2、可以设置移动范围，当前移动物体相对于某个区域内范围内移动,默认整个页面内拖动
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);}
8 .maindiv{width: 960px;border: 1px solid red;position: relative;margin: 0 auto;}
9 .bigdiv{width: 960px;position: relative;height: 1000px;overflow: hidden;}
10 #mmdiv{width: 300px;height: 100px;left: 0px;top: 0px;position: absolute;border: 1px solid red;overflow: hidden;}
11 #mmdiv h3{width: 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 (element, type, fn) {
20 if (element.addEventListener) {
21 element.addEventListener(type, fn, false);
22 }
23 else if (element.attachEvent) {
24 element.attachEvent("on" + type, fn);
25 }
26 else {
27 element["on" + type] = fn;
28 }
29 },
30 removeEvent: function (element, type, fn) {
31 if (element.removeEventListener) {
32 element.removeEventListener(type, fn, false);
33 }
34 else if (element.detachEvent) {
35 element.detachEvent("on" + type, fn);
36 }
37 else {
38 element["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 };
53
54 (function () {
55
56 function Drag(obj, handle, bigcont, moveCss, moveX, moveY) {
57 this.obj = obj;
58 this.handle = handle || obj;
59 this.bigcont = bigcont || document.documentElement;
60 this.moveCss = moveCss;
61 this.moveX = moveX || false;
62 this.moveY = moveY || false;
63 this.disX = this.disY = 0;
64 var _this = this;
65 base.addEvent(this.handle, "mousedown", function (event) {
66 _this.startDrag(event);
67 });
68 }
69
70 Drag.prototype = {
71 startDrag: function (event) {
72 base.unDefaultEvent(event);
73 var _this = this;
74 this.disX = base.page(event).x - this.obj.offsetLeft;
75 this.disY = base.page(event).y - this.obj.offsetTop;
76 this.mousemoveHandle = function (event) {
77 _this.move(event);
78 };
79
80 this.mouseupHandle = function () {
81 _this.stopDrag();
82 };
83
84 base.addEvent(document, "mousemove", this.mousemoveHandle);
85
86 base.addEvent(document, "mouseup", this.mouseupHandle);
87
88 if (document.selection && document.selection.empty) {
89 document.selection.empty();
90 }
91 else if (window.getSelection) {
92 window.getSelection().removeAllRanges();
93 }
94
95 if (this.obj.setCapture) {
96 this.obj.setCapture(true);
97 }
98
99 },
100 move: function (event) {
101 base.unDefaultEvent(event);
102 this.obj.className = this.moveCss;
103
104 var x = base.page(event).x - this.disX;
105 var y = base.page(event).y - this.disY;
106
107 var range = {
108 minX: this.bigcont.scrollLeft,
109 minY: this.bigcont.scrollTop,
110 maxX: this.bigcont.scrollWidth - this.obj.offsetWidth,
111 maxY: this.bigcont.scrollHeight - this.obj.offsetHeight
112 };
113
114 x = Math.max(x, range.minX);
115 x = Math.min(x, range.maxX);
116 y = Math.max(y, range.minY);
117 y = Math.min(y, range.maxY);
118
119 if (true == this.moveX && true == this.moveY) {
120 }
121 else if (true == this.moveX) {
122 this.obj.style.left = x + "px";
123 }
124 else if (true == this.moveY) {
125
126 this.obj.style.top = y + "px";
127 }
128 else {
129 this.obj.style.left = x + "px";
130 this.obj.style.top = y + "px";
131 }
132 },
133 stopDrag: function () {
134 this.obj.className = "";
135 base.removeEvent(document, "mousemove", this.mousemoveHandle);
136 base.removeEvent(document, "mouseup", this.mouseupHandle);
137 if (this.obj.releaseCapture) {
138 this.obj.releaseCapture(true);
139 }
140 }
141 };
142
143 base.addEvent(window, "load", function (event) {
144 var odiv = base.getId("mmdiv");
145 var obj = odiv.getElementsByTagName("h3")[0];
146 var bigdiv = base.getId("bigdiv");
147 var btn = document.getElementsByTagName("input");
148 new Drag(odiv, obj, bigdiv, "moving");
149 });
150 })();
151 </script>
152 </head>
153 <body>
154 <div class="maindiv">
155 <div>
156 默认整个页面内有问题，需要待完善
157 </div>
158 <div id="bigdiv" class="bigdiv">
159 <div id="mmdiv">
160 <h3>
161 <span>标题</span>
162 </h3>
163 </div>
164 </div>
165 </div>
166 </body>
167 </html>