你的位置:首页 > 软件开发 > Java > 拖拽改变div的大小

拖拽改变div的大小

发布时间:2016-10-08 12:00:04
拖拽改变div的大小 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/ ...

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

原标题:拖拽改变div的大小

关键词:div

div
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。