简易而又灵活的Javascript拖拽框架（一）

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

一、开篇

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

二、代码

先把代码贴出来

Code

varDrag={
　　"obj":null,
　　"init":function(handle,dragBody,e){
　　　　if(e==null){
　　　　　　handle.onmousedown=Drag.start;
　　　　}
　　　　handle.root=dragBody;
　　　　
　　　　if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left="0px";
　　　　if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top="0px";//确保后来能够取得top值
　　　　handle.root.onDragStart=newFunction();
　　　　handle.root.onDragEnd=newFunction();
　　　　handle.root.onDrag=newFunction();
　　　　if(e!=null){
　　　　　　varhandle=Drag.obj=handle;
　　　　　　e=Drag.fixe(e);
　　　　　　vartop=parseInt(handle.root.style.top);
　　　　　　varleft=parseInt(handle.root.style.left);
　　　　　　handle.root.onDragStart(left,top,e.pageX,e.pageY);
　　　　　　handle.lastMouseX=e.pageX;
　　　　　　handle.lastMouseY=e.pageY;
　　　　　　document.onmousemove=Drag.drag;
　　　　　　document.onmouseup=Drag.end;
　　　　}
　　},
　　"start":function(e){
　　　　varhandle=Drag.obj=this;
　　　　e=Drag.fixEvent(e);
　　　　vartop=parseInt(handle.root.style.top);
　　　　varleft=parseInt(handle.root.style.left);
　　　　//alert(left)
　　　　//一般情况下lefttop在初始的时候都为0
　　　　handle.root.onDragStart(left,top,e.pageX,e.pageY);
　　　　handle.lastMouseX=e.pageX;
　　　　handle.lastMouseY=e.pageY;
　　　　document.onmousemove=Drag.drag;
　　　　document.onmouseup=Drag.end;
　　　　returnfalse;
　　},　　
　　"drag":function(e){//这里的this为document所以拖动对象只能保存在Drag.obj里
　　　　e=Drag.fixEvent(e);
　　　　varhandle=Drag.obj;
　　　　varmouseY=e.pageY;
　　　　varmouseX=e.pageX;
　　　　vartop=parseInt(handle.root.style.top);
　　　　varleft=parseInt(handle.root.style.left);//这里的top和left是handle.root距离浏览器边框的上边距和左边距
　　　　
　　　　varcurrentLeft,currentTop;
　　　　currentLeft=left+mouseX-handle.lastMouseX;
　　　　currentTop=top+(mouseY-handle.lastMouseY);
　　　　
　　　　//上一瞬间的上边距加上鼠标在两个瞬间移动的距离得到现在的上边距
　　　　
　　　　handle.root.style.left=currentLeft+"px";
　　　　handle.root.style.top=currentTop+"px";
　　　　
　　　　//更新当前的位置
　　　　
　　　　handle.lastMouseX=mouseX;
　　　　handle.lastMouseY=mouseY;
　　　　
　　　　//保存这一瞬间的鼠标值用于下一次计算位移
　　　　
　　　　handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);//调用外面对应的函数
　　　　returnfalse;
　　},
　　"end":function(){
　　　　document.onmousemove=null;
　　　　document.onmouseup=null;
　　　　Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
　　　　Drag.obj=null;
　　},
　　"fixEvent":function(e){//格式化事件参数对象
　　　　if(typeofe=="undefined")e=window.event;
　　　　if(typeofe.layerX=="undefined")e.layerX=e.offsetX;
　　　　if(typeofe.layerY=="undefined")e.layerY=e.offsetY;
　　　　if(typeofe.pageX=="undefined")e.pageX=e.clientX+document.body.scrollLeft-document.body.clientLeft;
　　　　if(typeofe.pageY=="undefined")e.pageY=e.clientY+document.body.scrollTop-document.body.clientTop;
　　　　returne;
　　}
};