拖拽改变div的大小
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>Resize</title>
7 <style type="text/css">
8 #rRightDown,
9 #rLeftDown,
10 #rLeftUp,
11 #rRightUp,
12 #rRight,
13 #rLeft,
14 #rUp,
15 #rDown {
16 position: absolute;
17 background: #C00;
18 width: 6px;
19 height: 6px;
20 z-index: 5;
21 font-size: 0;
22 }
23
24 #rRight {
25 width: 15px
26 }
27
28 #rLeftDown,
29 #rRightUp {
30 cursor: ne-resize;
31 }
32
33 #rRightDown,
34 #rLeftUp {
35 cursor: nw-resize;
36 }
37
38 #rRight,
39 #rLeft {
40 cursor: e-resize;
41 }
42
43 #rUp,
44 #rDown {
45 cursor: n-resize;
46 }
47
48 #rRightDown {
49 bottom: -3px;
50 right: -3px;
51 }
52
53 #rLeftDown {
54 bottom: -3px;
55 left: -3px;
56 }
57
58 #rRightUp {
59 top: -3px;
60 right: -3px;
61 }
62
63 #rLeftUp {
64 top: -3px;
65 left: -3px;
66 }
67
68 #rRight {
69 right: -3px;
70 top: 50%
71 }
72
73 #rLeft {
74 left: -3px;
75 top: 50%
76 }
77
78 #rUp {
79 top: -3px;
80 left: 50%
81 }
82
83 #rDown {
84 bottom: -3px;
85 left: 50%
86 }
87 </style>
88 </head>
89
90 <body>
91 <div id=‘ss‘ style="height:100px; width:100px; border:1px solid #000000; position:absolute; left:200px; top:200px;">
92 <div id="rRightDown"> </div>
93 <div id="rLeftDown"> </div>
94 <div id="rRightUp"> </div>
95 <div id="rLeftUp"> </div>
96 <div id="rRight"> </div>
97 <div id="rLeft"> </div>
98 <div id="rUp"> </div>
99 <div id="rDown"></div>
100 </div>
101 <script>
102 var Sys = (function(ua) {
103 var s = {};
104 s.IE = ua.match(/msie ([\d.]+)/) ? true : false;
105 s.Firefox = ua.match(/firefox\/([\d.]+)/) ? true : false;
106 s.Chrome = ua.match(/chrome\/([\d.]+)/) ? true : false;
107 s.IE6 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)) ? true : false;
108 s.IE7 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7)) ? true : false;
109 s.IE8 = (s.IE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8)) ? true : false;
110 return s;
111 })(navigator.userAgent.toLowerCase()); /*判断是哪一种浏览器,火狐,谷歌,ie*/
112 var $ = function(id) {
113 return document.getElementById(id);
114 }; /*获取元素,模仿jQuery*/
115 var Css = function(e, o) { /*更改对象的top,left,width,height来控制对象的大小*/
116 for(var i in o)
117 e.style[i] = o[i];
118 };
119 var Extend = function(destination, source) { /*拷贝对象的属性*/
120 for(var property in source) {
121 destination[property] = source[property];
122 }
123 };
124 /*直接调用方法*/
125 var Bind = function(object, fun) {
126 var args = Array.prototype.slice.call(arguments).slice(2);
127 return function() {
128 return fun.apply(object, args);
129 }
130 };
131 /*直接调用方法,并将事件的类型传入作为第一个参数*/
132 var BindAsEventListener = function(object, fun) {
133 var args = Array.prototype.slice.call(arguments).slice(2);
134 return function(event) {
135 return fun.apply(object, [event || window.event].concat(args));
136 }
137 };
138 /*获取当前元素的属性*/
139 var CurrentStyle = function(element) {
140 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
141 };
142 /*事件监听,执行对应的函数*/
143 function addListener(element, e, fn) {
144 element.addEventListener ? element.addEventListener(e, fn, false) : element.attachEvent("on" + e, fn);
145 };
146 /*事件的移除*/
147 function removeListener(element, e, fn) {
148 element.removeEventListener ? element.removeEventListener(e, fn, false) : element.detachEvent("on" + e, fn)
149 };
150 /*创建一个新的可以拖拽的,变换大小的对象*/
151 var Class = function(properties) {
152 var _class = function() {
153 return(arguments[0] !== null && this.initialize && typeof(this.initialize) == ‘function‘) ? this.initialize.apply(this, arguments) : this;
154 };
155 _class.prototype = properties;
156 return _class;
157 };
158 var Resize = new Class({
159 initialize: function(obj) {
160 this.obj = obj;
161 this.resizeelm = null;
162 this.fun = null; //记录触发什么事件的索引
163 this.original = []; //记录开始状态的数组
164 this.width = null;
165 this.height = null;
166 this.fR = BindAsEventListener(this, this.resize); /*拖拽去更改div的大小*/
167 this.fS = Bind(this, this.stop); /*停止移除监听的事件*/
168 },
169 set: function(elm, direction) {
170 if(!elm) return;
171 this.resizeelm = elm;
172 /*点击事件的监听,调用start函数去初始化数据,监听mousemove和mouseup,这两个事件,当mouseover的时候,去更改div的大小,当mouseup,去清除之前监听的两个事件*/
173 addListener(this.resizeelm, ‘mousedown‘, BindAsEventListener(this, this.start, this[direction]));
174 return this;
175 },
176 start: function(e, fun) {
177 this.fun = fun;
178 this.original = [parseInt(CurrentStyle(this.obj).width), parseInt(CurrentStyle(this.obj).height), parseInt(CurrentStyle(this.obj).left), parseInt(CurrentStyle(this.obj).top)];
179 console.log({
180 width: this.original[0],
181 height: this.original[1],
182 left: this.original[2],
183 top: this.original[3]
184 });
185 this.width = (this.original[2] || 0) + this.original[0];
186 this.height = (this.original[3] || 0) + this.original[1];
187 addListener(document, "mousemove", this.fR);
188 addListener(document, ‘mouseup‘, this.fS);
189 },
190 resize: function(e) {
191 this.fun(e);
192 /*失去焦点的时候,调用this.stop去清除监听事件*/
193 Sys.IE ? (this.resizeelm.onlosecapture = function() {
194 this.fS();
195 }) : (this.resizeelm.onblur = function() {
196 this.fS();
197 })
198 },
199 stop: function() {
200 removeListener(document, "mousemove", this.fR);
201 removeListener(document, "mousemove", this.fS);
202 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); /**清除选中的内容*/
203 },
204 up: function(e) {
205 this.height > e.clientY ? Css(this.obj, {
206 top: e.clientY + "px",
207 height: this.height - e.clientY + "px"
208 }) : this.turnDown(e);
209 },
210 down: function(e) {
211 e.clientY > this.original[3] ? Css(this.obj, {
212 top: this.original[3] + ‘px‘,
213 height: e.clientY - this.original[3] + ‘px‘
214 }) : this.turnUp(e);
215 },
216 left: function(e) {
217 e.clientX < this.width ? Css(this.obj, {
218 left: e.clientX + ‘px‘,
219 width: this.width - e.clientX + "px"
220 }) : this.turnRight(e);
221 },
222 right: function(e) {
223 e.clientX > this.original[2] ? Css(this.obj, {
224 left: this.original[2] + ‘px‘,
225 width: e.clientX - this.original[2] + "px"
226 }) : this.turnLeft(e);
227 },
228 leftUp: function(e) {
229 this.up(e);
230 this.left(e);
231 },
232 leftDown: function(e) {
233 this.left(e);
234 this.down(e);
235 },
236 rightUp: function(e) {
237 this.up(e);
238 this.right(e);
239 },
240 rightDown: function(e) {
241 this.right(e);
242 this.down(e);
243 },
244 turnDown: function(e) {
245 Css(this.obj, {
246 top: this.height + ‘px‘,
247 height: e.clientY - this.height + ‘px‘
248 });
249 },
250 turnUp: function(e) {
251 Css(this.obj, {
252 top: e.clientY + ‘px‘,
253 height: this.original[3] - e.clientY + ‘px‘
254 });
255 },
256 turnRight: function(e) {
257 Css(this.obj, {
258 left: this.width + ‘px‘,
259 width: e.clientX - this.width + ‘px‘
260 });
261 },
262 turnLeft: function(e) {
263 Css(this.obj, {
264 left: e.clientX + ‘px‘,
265 width: this.original[2] - e.clientX + ‘px‘
266 });
267 }
268 });
269 window.onload = function() {
270 new Resize($(‘ss‘)).set($(‘rUp‘), ‘up‘).set($(‘rDown‘), ‘down‘).set($(‘rLeft‘), ‘left‘).set($(‘rRight‘), ‘right‘).set($(‘rLeftUp‘), ‘leftUp‘).set($(‘rLeftDown‘), ‘leftDown‘).set($(‘rRightDown‘), ‘rightDown‘).set($(‘rRightUp‘), ‘rightUp‘);
271 }
272 </script>
273 </body>
274
275 </html>
转自：http://blog.csdn.net/w329636271/article/details/50696121
时间： 2024-10-05 22:04:15