Javascript Resize和Drag类,基于jQuery

　　前一段时间写了一个 "在线图片切割"的小程序，现在将其中的Resize和Drag动作作为单独的类分离出来，与大家分享。这两个类都须要jQuery支持，但应该可以很轻松的改写出非jQuery的版本出来。另外，Resize类与Drag类的代码很相似，如果想的话，应该可容易的整合为一个类。有心的朋友可以试一下。欢迎拍砖和提出建议:）

使用

　　点击这里查看演示效果。

$(function(){
    var sa = document.getElementById('selectArea');
    $('#selectArea span').mousedown(function(e){
        new Resize(sa).start(e, this.className.replace('-resize', ''));
    });
    $('#selectArea').mousedown(function(e){
        new Drag(sa).start(e);
    });
});

　　

　　下面是HTML部分：

<div style="margin:30px 100px;position:relative;height:500px;border:1px solid #000;background-color:#EEE;">
this is wrapper.

    <div id="selectArea" style="left:100px;top:80px;width:150px;height:100px; background-color:#CCC;">
    <span class="north-west-resize"></span><span class="north-resize"></span><span class="north-east-resize"></span>
    <span class="west-resize"> </span>                                   <span class="east-resize"> </span>
    <span class="south-west-resize"></span><span class="south-resize"></span><span class="south-east-resize"></span>
    you can resize and drag this box.
    </div>
</div>

 

 Resize类说明

 　　该类使用向量代表方向，西方(x = -1),北方(y = -1),东方(x = 1)和南方(y = 1),，没有方向用0表示。这样，就可以用这些值组成的向量代表八个方向。而实现时，用一个点oPos表示调整对象的左上角的点，iPos表示调整对象的右下角的点。因此，在调整大小时，如果方向为西南（x = -1，y = 1），则只须调整oPos.x和iPos.y。

　　下面是Resize类的属性和选项：

    target    : null,    // 要Resize的元素
    parentOffset: {left:0,top:0}, // 最近一个定位的父对象(target.offsetParent)元素在当前视口的相对偏移
    info : { left:0, top:0,    width:0, height:0,
        pageLeft:0,  // 元素相对于当前视口left的偏移
        pageTop:0    // 元素相对于当前视口top的偏移
    },
    option : {
        direction:'',   // 调整的方向
        minWidth : 20,  // 限制最小宽度
        minHeight: 20,  // 限制最小高度
        boundLeft   : 0,// 左边界
        boundTop    : 0,// 上边界
        boundRight  : 9999,//右边界
        boundBottom : 9999,//下边界
        resizing : null,    //在调整大小时会调用的回调函数,参数为info
        complete : null     //在调整大小时结束时调用的回调函数,参数为info
    }

 

　　下面是setDirection方法：

    setDirection : function(direction) {
        switch(direction) {
        case 'west' :this.vector = {x:-1,y: 0};break;
        case 'east' :this.vector = {x: 1,y: 0};break;
        case 'north':this.vector = {x: 0,y:-1};break;
        case 'south':this.vector = {x: 0,y: 1};break;
        case 'north-west':this.vector = {x:-1,y:-1};break; 
        case 'south-west':this.vector = {x:-1,y: 1};break; 
        case 'north-east':this.vector = {x: 1,y:-1};break; 
        case 'south-east':this.vector = {x: 1,y: 1};break;
        default:return false;
        }
        return true;
    }

 

　　下面是onResizing事件：

    onResizing: function(e){
        // 修正X,Y
        var x = Math.max(Math.min(e.pageX, this.option.boundRight), this.option.boundLeft);
        var y = Math.max(Math.min(e.pageY, this.option.boundBottom), this.option.boundTop); 
         // 依次为向西,东,北,南方向调整
        if(this.vector.x === -1) this.oPos.x = Math.min(x, this.iPos.x - this.option.minWidth);
        if(this.vector.x ===  1) this.iPos.x = Math.max(x, this.oPos.x + this.option.minWidth);
        if(this.vector.y === -1) this.oPos.y = Math.min(y, this.iPos.y - this.option.minHeight);
        if(this.vector.y ===  1) this.iPos.y = Math.max(y, this.oPos.y + this.option.minHeight);
        this.resize(this.oPos.x - this.parentOffset.left, this.oPos.y-this.parentOffset.top, this.iPos.x - this.oPos.x, this.iPos.y - this.oPos.y);
        return false;
    }

 

Drag类说明

　　Drag与Resize类非常相似，它们的属性，方法都差不多。

　　由于拖动对象时，对象上所有的点都会移动相同的偏移量。所以将对象旧的左上角的点，鼠标现在所在的点，鼠标原来所在的点作向量运算,就可以得到对象左上角的点现在所在的位置（pointLeftTopNew = pointLeftTopOld + pointMouseNew - pointMouseOld）。

　　下面是onDragging 事件：

    onDragging: function(e) {
        // 调整元素相对于当前视口的偏移
        // this.oPos 为鼠标原来所在的点
        // e.page 为鼠标现在所在的点
        // 将它们作向量运算(e.page - this.oPos) 就得到了target的移动的向量,
        // 用target左上角的点加上它就得到了this.info.pageLeft 和 this.info.pageTop
        this.info.pageLeft = Math.max(Math.min(this.info.pageLeft + e.pageX - this.oPos.x, this.option.boundRight  - this.info.width), this.option.boundLeft);
        this.info.pageTop  = Math.max(Math.min(this.info.pageTop  + e.pageY - this.oPos.y, this.option.boundBottom - this.info.height), this.option.boundTop);
        this.oPos = {x : e.pageX,y : e.pageY};
        this.drag(this.info.pageLeft - this.parentOffset.left, this.info.pageTop - this.parentOffset.top);
        return false;
    }

 

 下载 

　　因为可能有多个实例，属性写在prototype里会引起错误，所以在这里我犯了严重的错误。

　　如果需要请使用DragResize类。