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上移动，一直都会相应。

五、实例下载

 点此下载示例