Drag and drop to change the size of the div
- 高洛峰Original
- 2016-10-08 13:51:161552browse
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>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Basic learning of Java--a brief summary of inheritanceNext article：Basic learning of Java--a brief summary of inheritance