드래그 앤 드롭으로 div 크기 변경-java类库-php.cn

집

类库下载

java类库

드래그 앤 드롭으로 div 크기 변경

高洛峰

Oct 08, 2016 pm 01:51 PM

     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=&#39;ss&#39; 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) == &#39;function&#39;) ? 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, &#39;mousedown&#39;, 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, &#39;mouseup&#39;, 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] + &#39;px&#39;,213                         height: e.clientY - this.original[3] + &#39;px&#39;214                     }) : this.turnUp(e);215                 },216                 left: function(e) {217                     e.clientX < this.width ? Css(this.obj, {218                         left: e.clientX + &#39;px&#39;,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] + &#39;px&#39;,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 + &#39;px&#39;,247                         height: e.clientY - this.height + &#39;px&#39;248                     });249                 },250                 turnUp: function(e) {251                     Css(this.obj, {252                         top: e.clientY + &#39;px&#39;,253                         height: this.original[3] - e.clientY + &#39;px&#39;254                     });255                 },256                 turnRight: function(e) {257                     Css(this.obj, {258                         left: this.width + &#39;px&#39;,259                         width: e.clientX - this.width + &#39;px&#39;260                     });261                 },262                 turnLeft: function(e) {263                     Css(this.obj, {264                         left: e.clientX + &#39;px&#39;,265                         width: this.original[2] - e.clientX + &#39;px&#39;266                     });267                 }268             });269             window.onload = function() {270                 new Resize($(&#39;ss&#39;)).set($(&#39;rUp&#39;), &#39;up&#39;).set($(&#39;rDown&#39;), &#39;down&#39;).set($(&#39;rLeft&#39;), &#39;left&#39;).set($(&#39;rRight&#39;), &#39;right&#39;).set($(&#39;rLeftUp&#39;), &#39;leftUp&#39;).set($(&#39;rLeftDown&#39;), &#39;leftDown&#39;).set($(&#39;rRightDown&#39;), &#39;rightDown&#39;).set($(&#39;rRightUp&#39;), &#39;rightUp&#39;);271             }272         </script>273     </body>274 275 </html>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.