8 points_javascript 기술을 통해 div의 크기를 변경하는 js 드래그 구현 방법

코드 복사 코드는 다음과 같습니다.

<script> <br>var Sys = (function(ua){ <br>    var s = {}; <br>    s.IE = ua.match(/msie ([\d.]+)/)?true:false; <br>    s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; <br>    s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; <br>    s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; <br>    s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; <br>    s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; <br>    return s; <br>})(navigator.userAgent.toLowerCase()); <p>var $ = function (id) { <br>    return document.getElementById(id); <br>};</p> <p>var Css = function(e,o){ <br>    for(var i in o) <br>    e.style[i] = o[i]; <br>};</p> <p>var Extend = function(destination, source) { <br>    for (var property in source) { <br>        destination[property] = source[property]; <br>    } <br>};</p> <p>var Bind = function(object, fun) { <br>    var args = Array.prototype.slice.call(arguments).slice(2); <br>    return function() { <br>        return fun.apply(object, args); <br>    } <br>};</p> <p>var BindAsEventListener = function(object, fun) { <br>    var args = Array.prototype.slice.call(arguments).slice(2); <br>    return function(event) { <br>        return fun.apply(object, [event || window.event].concat(args)); <br>    } <br>};</p> <p>var CurrentStyle = function(element){ <br>    return element.currentStyle || document.defaultView.getComputedStyle(element, null); <br>};</p> <p>function addListener(element,e,fn){ <br>    element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn); <br>}; <br>function removeListener(element,e,fn){ <br>    element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn) <br>};</p> <p>var Class = function(properties){ <br>    var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;}; <br>    _class.prototype = properties; <br>    return _class; <br>};</p> <p>var Resize =new Class({ <br>    초기화 : function(obj){ <br>        this.obj = obj; <br>        this.resizeelm = null; <br>        this.fun = null; //记录触发什么事件的索引 <br>        this.original = []; //记录开始状态的数组 <br>        this.width = null <br>        this.height = null;    this.fR = BindAsEventListener(this ,this.resize); <br>        this.fS = Bind(this,this.stop);     <br>    }, <br>    set : function(elm,direction){ <br>        if(!elm)return; 🎜>        this.resizeelm = <br>        addListener(this.resizeelm,'mousedown',BindAsEventListener(this, this.start, this[direction])) <br>        return this; start : function(e,fun){ <br>        this.fun = fun; <br>        this.original = [parseInt(CurrentStyle(this.obj).width),parseInt(CurrentStyle(this.obj).height), parseInt(CurrentStyle(this.obj).left),parseInt(CurrentStyle(this.obj).top)];<br>        this.width = (this.original[2]||0) this.original[0]; <br>        this.height = (this.original[3]||0) this.original[1] <br>        addListener(document,"mousemove",this.fR); <br>        addListener(document,'mouseup',this.fS); <br>    }, <br>    크기 조정 : function(e){ <br>        this.fun(e); <br>        Sys.IE?(this.resizeelm.onlosecapture=function(){this.fS()}):(this.resizeelm.onblur=function(){this.fS()}) <br>    }, <br>    중지 : function(){ <br>        RemoveListener(document, "mousemove", this.fR); <br>        RemoveListener(document, "mousemove", this.fS); <br>        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();     <br>    }, <br>    up : function(e){ <br>        this.height>e.clientY?Css(this.obj,{top:e.clientY "px",height:this.height-e. clientY "px"}):this.turnDown(e); <br>    }, <br>    down : function(e){ <br>        e.clientY>this.original[3]?Css(this.obj,{top:this.original[3] 'px',height: e.clientY-this.original[3] 'px'}):this.turnUp(e);     <br>    }, <br>    왼쪽 : 함수(e){ <br>        e.clientX<this.width?Css(this.obj,{left:e.clientX 'px',width:this.width-e. clientX "px"}):this.turnRight(e);         <BR>    }, <BR>    오른쪽 : 기능(e){ <BR>        e.clientX>this.original[2]?Css(this.obj,{left:this.original[2] 'px',width: e.clientX-this.original[2] "px"}):this.turnLeft(e)    ; <br>    }, <br>    leftUp:function(e){ <br>        this.up(e);this.left(e); <br>    }, <br>    leftDown:function(e){ <br>        this.left(e);this.down(e); <br>    }, <br>    rightUp:function(e){ <br>        this.up(e);this.right(e); <br>    }, <br>    rightDown:function(e){ <br>        this.right(e);this.down(e); <br>    },                <br>    TurnDown : function(e){ <br>        Css(this.obj,{top:this.height 'px',height:e.clientY - this.height 'px'}); <br>    }, <br>    TurnUp : function(e){ <br>        Css(this.obj,{top : e.clientY 'px',height : this.original[3] - e.clientY 'px'} ); <br>    }, <br>    TurnRight : function(e){ <br>        Css(this.obj,{left:this.width 'px',width:e.clientX- this.width 'px'}); <br>    }, <br>    TurnLeft : function(e){ <br>        Css(this.obj,{left:e.clientX 'px',width:this.original[2]-e.clientX 'px'});          <br>    }         <br>}); <br>window.onload = function(){ <br>    new Resize($('ss')).set($('rUp'),'up').set($('rDown'),'down ').set($('rLeft'),'왼쪽').set($('rRight'),'right').set($('rLeftUp'),'leftUp').set($(' rLeftDown'),'leftDown').set($('rRightDown'),'rightDown').set($('rRightUp'),'rightUp');<br>} <br></script>