WEB开发网
开发学院网页设计JavaScript Javascript实现最简跨平台面向对象拖拽 阅读

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

 2010-09-14 13:24:32 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 一、开篇拖拽已经是个Javascript的老话题了,但是也是最经典的问题之一,Javascript实现最简跨平台面向对象拖拽,在这里,我用面向对象的方法实现了简单的拖拽,而注册到document上就不会出现这个问题,因为鼠标一直都在document上移动,这是做复杂js效果的基础,二、

本文示例源代码或素材下载

一、开篇

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

二、原理

拖拽的原理很简单,就是捕获鼠标事件,作出应有的相应。

需要处理的鼠标事件有三个:mousedown mousemove mouseup,下面分别介绍在各个事件需要处理一些什么事情。

1、mousedown

(1)    将鼠标所点击的对象position设置为absolute,这样才可以通过设置top和left的值让元素动起来;

(2)    获得鼠标点击的这个时刻鼠标与拖动对象边界的坐标差(offsetX和offsetY),以便在拖动的时候来确定拖动对象的位置。

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

(3)    注册document的mousemove事件

2、mousemove

(1)    通过offsetX和offsetY以及鼠标的即时位置来确定被拖动对象的即时位置。

3、mouseup

(1)    删除document注册的mousemove事件

三、实现

主要的代码如下:

functionDrag(oHandle,oContainer){
  if(typeofDrag.zIndex=="undefined")
    Drag.zIndex=1000;
  varhandle=oHandle;
  varcontainer=oContainer;
  varoffsetX=0;
  varoffsetY=0;
  varisDragging=false;
  
   varmouseDown=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;
    }
  };
  
  varmouseMove=function(){
    oEvent=oEventUtil.getEvent();
    if(isDragging){
      container.style.top=(oEvent.pageY-offsetY)+'px';
      container.style.left=(oEvent.pageX-offsetX)+'px';
    }
  };
  varmouseUp=function(){
    isDragging=false;
    oEventUtil.removeEventHandler(document,"mousemove",mouseMove);
  };
  
  oEventUtil.addEventHandler(handle,"mousedown",mouseDown);
  oEventUtil.addEventHandler(handle,"mouseup",mouseUp);
}

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

如果要使用很简单,代码如下:

window.onload=function(){
  vardrag1=newDrag(document.getElementById("header"),document.getElementById("container"));
  vardrag=newDrag(document.getElementById("Div2"),document.getElementById("Div1"));
}

四、注意几点

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

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

Tags:Javascript 实现 跨平台

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接