拖动类(重写版)

由于项目需要，今天把以前写的拖动类翻了出来，发现很多不合适的地方，于是重新构造了这个类。收录在这里，供大家研究。 上次的autoComplete有朋友抱怨缺少注释，这次特意加上了详细的注释。

/**/ /*
 *    Dragger Class
 *  Author:Robin Chen (robchen@126.com)
 */

/**/ /* Dragger Class */
// 元素拖动类
// 调用示例：var dg = new Dragger({
//             target:'div',                                //target可以为元素id或者元素本身的引用
//             controller:'div',                            //controller为响应鼠标动作的元素，来控制目标的拖动。可以为id也可以为元素引用。可选参数，默认为对象元素本身。
//             handler: new DraggerHandler({                //handler为自定义事件处理句柄,可选参数。
//                 onStartDragging:function(){...},
//                 onDragging:function(){...},
//                 onStopDragging:function(){...}
//             )
//         }
var  Dragger  =   function (params) ... {
    //保存引用到实例列表
    Dragger.instances.push(this);
    //检查浏览器
    Dragger.checkBrowser();
    //公共属性obj：拖动对象元素
    this.obj = Dragger.getElement(params.target);
    this.obj.dragController = this;
    //公共属性controller:拖动控制元素
    if(params.controller)...{
        this.controller = Dragger.getElement(params.controller);
    }else...{
        this.controller = this.obj;    
    }
    //公共属性,自定义事件处理句柄
    this.userHandler = params.handler || null;
    //公共属性hanlder,
    this.controller.dragController = this;
    this.controller.dragTarget = this.obj;
    /**//* 私有属性 */
    //当前对象的引用
    var __this = this;
    //当前是否能够拖动
    var dragable = false;
    //鼠标位置缓存
    var mousePosition = null;
    //对象位置缓存
    var elementPosition = Dragger.getElementPosition(this.obj);
   
    /**//* 私有方法 */
    //鼠标按下事件句柄
    var mouseDownHandler = function(evt)...{
        if(!__this.dragMode)return;
        var evt = evt || event;
        var target = evt.target || evt.srcElement;
        dragable = true;
        mousePosition = Dragger.getMousePosition(evt);
            elementPosition = Dragger.getElementPosition(__this.obj);
        Dragger.Event.bind(document.body,'mousemove',mouseMoveHandler,true);
        if(__this.userHandler)__this.userHandler.onStartDragging.apply(__this,arguments);
    }
    //鼠标松开事件句柄
    var mouseUpHandler = function(evt)...{
        if(!__this.dragMode)return;
        var evt = evt || event;
        dragable = false;
        mousePosition = null;
        Dragger.Event.remove(document.body,'mousemove',mouseMoveHandler,true);
        if(__this.userHandler)__this.userHandler.onStopDragging.apply(__this,arguments);
    }
    //鼠标移动事件句柄
    var mouseMoveHandler = function(evt)...{
        if(!__this.dragMode)return;
        if(!dragable)return;
        var evt = evt || event;
        var currentMousePosition = Dragger.getMousePosition(evt);
        __this.obj.style.left = elementPosition[0] + currentMousePosition[0] - mousePosition[0] + 'px';
        __this.obj.style.top = elementPosition[1] + currentMousePosition[1] - mousePosition[1] + 'px';
        elementPosition = [__this.obj.offsetLeft,__this.obj.offsetTop];
        mousePosition = currentMousePosition;
        if(__this.userHandler)__this.userHandler.onDragging.apply(__this,arguments);
    }
    //鼠标划过事件句柄
    var mouseOverHandler = function()...{
        if(parseInt(__this.obj.style.zIndex) == Dragger.zIndex)return;
        __this.obj.style.zIndex = ++ Dragger.zIndex;
    }
    //绑定事件处理
    Dragger.Event.bind(this.controller,'mousedown',mouseDownHandler);
    Dragger.Event.bind(document.body,'mouseup',mouseUpHandler);
    Dragger.Event.bind(this.obj,'mouseover',mouseOverHandler);
}
/**/ /* 公共属性和方法 */
Dragger.prototype  =   ... {
    //是否能够拖动
    dragMode:true,
    //打开拖动模式
    dragModeOn:function()...{
        this.dragMode = true;
    },
    //关闭拖动模式
    dragModeOff:function()...{
        this.dragMode = false;    
    }
}
/**/ /* 静态属性和方法 */
// 深度
Dragger.zIndex  =   1000 ;
// 检查浏览器
Dragger.checkBrowser  =   function () ... {
    if(!this.browser)...{
        //静态属性,浏览器信息
        this.browser = ...{};
        if(window.ActiveXObject)...{
            this.browser.type = 'ie';
            if(window.XMLHttpRequest)...{
                this.browser.ver = 'ie7';
            }else...{
                this.browser.ver = 'ie6';
            }
        }else...{
            this.browser.type = 'gecko';    
        }
    }
}
// 绑定和取消绑定事件
Dragger.Event  =   ... {
    //绑定事件处理
    bind:function(obj,evt,handler)...{
        var capture = !!arguments[3];
        if(Dragger.browser.type == 'ie')...{
            obj.attachEvent('on' + evt,handler);
            if(capture)obj.setCapture();
        }else...{
            obj.addEventListener(evt,handler,capture);
        }
    },
    //取消事件处理
    remove:function(obj,evt,handler)...{
        var capture = !!arguments[3];
        if(Dragger.browser.type == 'ie')...{
            obj.detachEvent('on' + evt,handler);
            if(capture)obj.releaseCapture();
        }else...{
            obj.removeEventListener(evt,handler,capture);
        }
    }
}
// 取得元素对象的引用
// 参数obj可以为元素的id或者元素本身
Dragger.getElement  =   function (obj) ... {
    if(typeof obj == 'string')...{
        return document.getElementById(obj);
    }else...{
        return obj;
    }
}
// 取得当前鼠标实际位置
Dragger.getMousePosition  =   function (evt) ... {
    if(document.documentElement)...{
        var scrollTop = document.documentElement.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft;
    }else...{
        var scrollTop = document.body.scrollTop;
        var scrollLeft = document.body.scrollLeft;
    }
    return [evt.clientX + scrollLeft,evt.clientY + scrollTop];
}
// 取得元素实际位置
Dragger.getElementPosition  =   function (element) ... {
    var obj = element;
    var left = 0;
    var top = 0;
    try...{
        while(obj && obj.style)...{
            left += parseInt(obj.offsetLeft) || 0;
            top += parseInt(obj.offsetTop) || 0;
            obj = obj.parentNode;
        }
    }catch(e)...{}
    return [left,top];
}
// 当前页面所有Dragger实例
Dragger.instances  =  [];

// Dragger Hanlder Class
// Dragger事件句柄类，提供用户自定义事件
// 使用示例: new DraggerHandler({
//                 onStartDragging:function(){...},
//                 onDragging:function(){...},
//                 onStopDragging:function(){...}
//             );
// 三个事件句柄都为可选项
var  DraggerHandler  =   function (handler) ... {
    //开始拖动事件句柄
    this.onStartDragging = handler.onStartDragging || function()...{};
    //拖动中事件句柄
    this.onDragging = handler.onDragging || function()...{};
    //结束拖动事件句柄
    this.onStopDragging = handler.onStopDragging || function()...{};
}
DraggerHandler.prototype  =   ... {
    //重新绑定所有事件句柄
    reload:function(handler)...{
        this.onStartDragging = handler.onStartDragging || function()...{};
        this.onDragging = handler.onDragging || function()...{};
        this.onStopDragging = handler.onStopDragging || function()...{};
    },
    //清除所有事件句柄
    clear:function()...{
        this.onStartDragging = this.onDragging = this.onStopDragging = function()...{}
    }
}

使用实例：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > Dragger </ title >
< style > ... body{...}{height:1000px;}</style>
<script type="text/javascript" src="dragger.js"></script>
<script>...
window.onload = function()...{
    var myHandler1 = new DraggerHandler(...{
        onStartDragging:function()...{
            this.obj.style.filter = 'alpha(opacity=50)';
            this.obj.style.MozOpacity = '0.5';
            this.obj.style.Opacity = '0.5';
        },
        onStopDragging:function()...{
            this.obj.style.filter = 'alpha(opacity=100)';
            this.obj.style.MozOpacity = '1.0';
            this.obj.style.Opacity = '1.0';
        }
    })
    var myHandler2 = new DraggerHandler(...{
        onStartDragging:function()...{
            this.obj.style.border = '10px solid #FFCC00';
        },
        onStopDragging:function()...{
            this.obj.style.border = '1px solid black';
        }
    });
    var dg1 = new Dragger(...{target:'div1',handler:myHandler1});
    var dg2 = new Dragger(...{target:document.getElementById('div2'),handler:myHandler2});
    var dg3 = new Dragger(...{target:document.getElementsByTagName('div')[2],handler:myHandler1});
    var dg4 = new Dragger(...{target:'div4',controller:'div5',handler:myHandler1});
}
</script>
</head>

<body>
<div style="position:absolute; border:1px solid black; background-color:#000; width:200px; height:200px; left:10px; top:50px;cursor:move;" id="div1">Drag Me</div>
<div style="position:absolute; border:1px solid black; background-color:#f00; width:200px; height:200px; left:50px; top:100px;cursor:move;" id="div2">Drag Me</div>
<div style="position:absolute; border:1px solid black; background-color:#fee; width:200px; height:200px; left:90px; top:30px;cursor:move;">Drag Me</div>
<div style="position:absolute; border:1px solid black; background-color:#FFCC00; width:200px; height:200px; left:120px; top:80px;" id="div4"><div id="div5" style="width:100%;height:20px;background-color:#663366;cursor:move;">Drag Me</div></div>
</body>
</html>

演示地址为：http://www.robchen.cn/drag/