返回列表
发布日期: 2008-09-21 发布者: cobra 中文编程图书最低价热卖  English Programming Books 1#
一、开篇

最近在做js拖拽的时候，发现了一个强大而又灵活的拖拽框架，（之前用了代码混淆器，还好代码比较短，我就翻译过来了）利用这个框架不仅能实现简单的拖动，更能轻易的实现各种复杂的拖放功能。这一篇先实现最简单的拖拽，稍微复杂的拖放将在后面的文章里写出来。

二、代码

先把代码贴出来
  1. var Drag={
  2.     "obj":null,
  3.     "init":function(handle, dragBody, e){
  4.         if (e == null) {
  5.             handle.onmousedown=Drag.start;
  6.         }
  7.         handle.root = dragBody;
  8.        
  9.         if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left="0px";
  10.         if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top="0px";//确保后来能够取得top值
  11.         handle.root.onDragStart=new Function();
  12.         handle.root.onDragEnd=new Function();
  13.         handle.root.onDrag=new Function();
  14.         if (e !=null) {
  15.             var handle=Drag.obj=handle;
  16.             e=Drag.fixe(e);
  17.             var top=parseInt(handle.root.style.top);
  18.             var left=parseInt(handle.root.style.left);
  19.             handle.root.onDragStart(left,top,e.pageX,e.pageY);
  20.             handle.lastMouseX=e.pageX;
  21.             handle.lastMouseY=e.pageY;
  22.             document.onmousemove=Drag.drag;
  23.             document.onmouseup=Drag.end;
  24.         }
  25.     },
  26.     "start":function(e){
  27.         var handle=Drag.obj=this;
  28.         e=Drag.fixEvent(e);
  29.         var top=parseInt(handle.root.style.top);
  30.         var left=parseInt(handle.root.style.left);
  31.         //alert(left)
  32.         //一般情况下 left top 在初始的时候都为0
  33.         handle.root.onDragStart(left,top,e.pageX,e.pageY);
  34.         handle.lastMouseX=e.pageX;
  35.         handle.lastMouseY=e.pageY;
  36.         document.onmousemove=Drag.drag;
  37.         document.onmouseup=Drag.end;
  38.         return false;
  39.     },   
  40.     "drag":function(e){//这里的this为document 所以拖动对象只能保存在Drag.obj里
  41.         e=Drag.fixEvent(e);
  42.         var handle=Drag.obj;
  43.         var mouseY=e.pageY;
  44.         var mouseX=e.pageX;
  45.         var top=parseInt(handle.root.style.top);
  46.         var left=parseInt(handle.root.style.left);//这里的top和left是handle.root距离浏览器边框的上边距和左边距
  47.        
  48.         var currentLeft,currentTop;
  49.         currentLeft=left+mouseX-handle.lastMouseX;
  50.         currentTop=top+(mouseY-handle.lastMouseY);
  51.        
  52.         //上一瞬间的上边距加上鼠标在两个瞬间移动的距离 得到现在的上边距
  53.        
  54.         handle.root.style.left=currentLeft +"px";
  55.         handle.root.style.top=currentTop+"px";
  56.        
  57.         //更新当前的位置
  58.        
  59.         handle.lastMouseX=mouseX;
  60.         handle.lastMouseY=mouseY;
  61.        
  62.         //保存这一瞬间的鼠标值 用于下一次计算位移
  63.        
  64.         handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);//调用外面对应的函数
  65.         return false;
  66.     },
  67.     "end":function(){
  68.         document.onmousemove=null;
  69.         document.onmouseup=null;
  70.         Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
  71.         Drag.obj=null;
  72.     },
  73.     "fixEvent":function(e){//格式化事件参数对象
  74.         if(typeof e=="undefined")e=window.event;
  75.         if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
  76.         if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
  77.         if(typeof e.pageX == "undefined")e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
  78.         if(typeof e.pageY == "undefined")e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;
  79.         return e;
  80.     }
  81. };
复制代码
使用方法

Drag.init(handle,dragBody);这样可以让鼠标拖动元素。Handle为拖动的把手，dragBody是在拖动时需要移动的元素。

附件: drag2.jpg

如果需要更高级的控制拖动或者拖放的话，可以给dragBody设置三个方法

dragBody.onDragStart=function(left,top,mouseX,mouseY){}

onDrag（left,top,mouseX,mouseY）{}

onDragEnd（left,top,mouseX,mouseY）{}

这四个参数分别是：拖动对象的left属性、拖动对象的top属性（此时拖动对象的position为absolute）、鼠标当前的x、鼠标当前的y。在每个过程中都可以通过四个参数来更精确的控制拖动的每个过程，更主要的是我们不需要去管被鼠标拖动的元素是怎么移动的，这些都在框架中已经做好了，这让拖拽看起来更整洁。框架具体是怎么运转的，其实很简单

三、原理

Drag有几个成员

Drag.obj用来存放鼠标正在被拖动的元素，只有在鼠标按下过后才会赋值，鼠标松开便为空了。便于在这几个方法之间都能够轻易的找到正在被拖动的元素。

Drag.init主要是用来订阅handle的onmousedown事件，所以handle一旦点击，则会执行Drag.start方法。

Drag.start是用来注册document的mousemove和mouseup事件的，而且会调用我们定义的dragBody.onDragStart方法（这里的dragBody就是通过Drag.obj来获得的），以便处理框架以外需要处理的事情。

Mousemove的时候会不断的触发Drag.drag方法，这个方法主要是控制dragBody的移动（通过前后两个瞬间的位移差来调整dragBody的位置），以及调用外部的dragBody.onDrag方法，处理框架以外的事情。

Document的mouseup方法，调用外部的onDragEnd方法，释放document绑定的两个事件，以及将临时的obj置为空。（文/LongWay）

四、示例下载

点此下载示例：
简易而又灵活的Javascript拖拽框架（一）
TOP
返回列表