Javascript Resize和 Drag类,基于 jQuery -控件新闻-慧都网

Javascript Resize和 Drag类,基于 jQuery

转帖|其它|编辑：郝浩|2009-02-27 13:12:41.000|阅读 965 次

概述：Javascript Resize和 Drag类,基于 jQuery

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

使用

　　点击这里查看演示效果。

Use Resize and 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部分：

Demo HTML

Resize类说明

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

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

Properties And Options

　　下面是setDirection方法：

method -- 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 Event

    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 Event
    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;
    }

下载

　　点击下载Resize和Drag类

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：博客园

上一篇：ExtJs viewport& 可复用框架下一篇：lock 在 C#多线程中的用法