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