拖拽改變div的大小 轉自：http://blog.csdn.net/w329636271/article/details/50696121 ...
拖拽改變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:
