Javascript实现最简跨平台面向对象拖拽

 
一、开篇

拖拽已经是个Javascript的老话题了，但是也是最经典的问题之一。在这里，我用面向对象的方法实现了简单的拖拽，这是做复杂js效果的基础。
二、原理

拖拽的原理很简单，就是捕获鼠标事件，作出应有的相应。
需要处理的鼠标事件有三个：mousedown mousemove mouseup，下面分别介绍在各个事件需要处理一些什么事情。
1、 mousedown
（1）       将鼠标所点击的对象position设置为absolute，这样才可以通过设置top和left的值让元素动起来；
（2）       获得鼠标点击的这个时刻鼠标与拖动对象边界的坐标差（offsetX和offsetY），以便在拖动的时候来确定拖动对象的位置。



（3）       注册document的mousemove事件
2、 mousemove
（1）       通过offsetX和offsetY以及鼠标的即时位置来确定被拖动对象的即时位置。
3、 mouseup
（1）       删除document注册的mousemove事件
三、实现

主要的代码如下：

 

function Drag(oHandle,oContainer){
    if(typeof Drag.zIndex == "undefined")
        Drag.zIndex = 1000;
    var handle = oHandle;
    var container = oContainer;
    var offsetX = 0;
    var offsetY = 0;
    var isDragging = false;
    
     var mouseDown = function(){
        oEvent = oEventUtil.getEvent();
        Drag.zIndex++;
        container.style.zIndex = Drag.zIndex;
        if(oEvent.button == 1 || oEvent.button == 0){
            container.style.position = 'absolute';
            offsetX =  oEvent.pageX - container.offsetLeft;
            offsetY = oEvent.pageY - container.offsetTop;
            if(handle.innerHTML == ""){
                handle.innerHTML = " ";
            };
            oEventUtil.addEventHandler(document,"mousemove",mouseMove);
            isDragging = true;
        }
    };
    
    var mouseMove = function(){
        oEvent = oEventUtil.getEvent();
        if(isDragging){
            container.style.top = (oEvent.pageY - offsetY) + 'px';
            container.style.left = (oEvent.pageX - offsetX) + 'px';
        }
    };

    var mouseUp = function(){
        isDragging = false;
        oEventUtil.removeEventHandler(document,"mousemove",mouseMove);
    };
    
    oEventUtil.addEventHandler(handle,"mousedown",mouseDown);
    oEventUtil.addEventHandler(handle,"mouseup",mouseUp);
}
 

考虑到很多拖拽都是移动拖动条整个外框也要一起移动，在实例化这个类的时候就传递两个参数，一个是拖动条的对象，一个是外框对象。

如果要使用很简单，代码如下：

window.onload = function(){
    var drag1 = new Drag(document.getElementById("header"),document.getElementById("container"));
    var drag = new Drag(document.getElementById("Div2"),document.getElementById("Div1"));
}
 

四、注意几点

1、这里使用了对事件进行过封装的oEventUtil，这样使得拖拽的结构看起来更清晰。oEventUtil的具体代码可以参看我以前写的一篇博客，也可以直接下载本页的实例。

2、鼠标的三个事件所注册的对象是不一样的，mousedown和mouseup都要注册到拖动条这个对象上，而mousemove必须注册到document上，这样拖拽才能正常工作。因为如果把mousemove注册到拖动条上的话，鼠标移动过快就会移出拖动条，立刻就失去了mousemove的响应，而注册到document上就不会出现这个问题，因为鼠标一直都在document上移动，一直都会相应。

五、实例下载

 点此下载示例