拖拽改变div的大小

拖拽改变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

posted @ 2016-10-08 11:37  Ann丶  阅读(1728)  评论(3编辑  收藏  举报