8つのポイントを使用してdivのサイズを変更するjsドラッグを実装する方法_javascriptスキル

コードをコピー コードは次のとおりです:

<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.fR = BindAsEventListener; ,this.resize); <br> this.fS = Bind(this,this.stop); <br> }, <br> set : function(elm,direction){ <br> if(!elm)return; 🎜> this.resizeelm = elm; <br> addListener(this.resizeelm,'mousedown',BindAsEventListener(this, this.start, this[direction])); <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> サイズ変更 : 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>