How to implement js dragging to change the size of div through eight points_javascript skills

Copy code The code is as follows:

<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>    initialize : 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; <br>        this.fR = BindAsEventListener(this,this.resize); <br>        this.fS = Bind(this,this.stop);     <br>    }, <br>    set : function(elm,direction){ <br>        if(!elm)return; <br>        this.resizeelm = elm; <br>        addListener(this.resizeelm,'mousedown',BindAsEventListener(this, this.start, this[direction])); <br>        return this; <br>    }, <br>    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>    resize : function(e){ <br>        this.fun(e); <br>        Sys.IE?(this.resizeelm.onlosecapture=function(){this.fS()}):(this.resizeelm.onblur=function(){this.fS()}) <br>    }, <br>    stop : 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>    left : function(e){ <br>        e.clientX<this.width?Css(this.obj,{left:e.clientX 'px',width:this.width-e.clientX "px"}):this.turnRight(e);         <BR>    }, <BR>    right : function(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'),'left').set($('rRight'),'right').set($('rLeftUp'),'leftUp').set($('rLeftDown'),'leftDown').set($('rRightDown'),'rightDown').set($('rRightUp'),'rightUp');<br>} <br></script>