[JavaScript]简易而又灵活的Javascript拖拽框架(一)

baacloud免费翻墙vpn注册使用

一、开篇

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

二、代码

先把代码贴出来


var Drag={
    
"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=new Function();
        handle.root.onDragEnd
=new Function();
        handle.root.onDrag
=new Function();
        
if (e !=null) {
            
var handle=Drag.obj=handle;
            e
=Drag.fixe(e);
            
var top=parseInt(handle.root.style.top);
            
var left=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){
        
var handle=Drag.obj=this;
        e
=Drag.fixEvent(e);
        
var top=parseInt(handle.root.style.top);
        
var left=parseInt(handle.root.style.left);
        
//alert(left)
        //一般情况下 left top 在初始的时候都为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;
        
return false;
    },    
    
"drag":function(e){//这里的this为document 所以拖动对象只能保存在Drag.obj里
        e=Drag.fixEvent(e);
        
var handle=Drag.obj;
        
var mouseY=e.pageY;
        
var mouseX=e.pageX;
        
var top=parseInt(handle.root.style.top);
        
var left=parseInt(handle.root.style.left);//这里的top和left是handle.root距离浏览器边框的上边距和左边距
        
        
var currentLeft,currentTop;
        currentLeft
=left+mouseXhandle.lastMouseX;
        currentTop
=top+(mouseYhandle.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);
//调用外面对应的函数
        return false;
    },
    
"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(typeof e=="undefined")e=window.event;
        
if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
        
if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
        
if(typeof e.pageX == "undefined")e.pageX = e.clientX + document.body.scrollLeft  document.body.clientLeft;
        
if(typeof e.pageY == "undefined")e.pageY = e.clientY + document.body.scrollTop  document.body.clientTop;
        
return e;
    }
};

使用方法

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

 

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

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

onDragleft,top,mouseX,mouseY){}

onDragEndleft,top,mouseX,mouseY){}

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

 

三、原理

Drag有几个成员

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

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

Drag.start是用来注册documentmousemovemouseup事件的,而且会调用我们定义的dragBody.onDragStart方法(这里的dragBody就是通过Drag.obj来获得的),以便处理框架以外需要处理的事情。

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

Documentmouseup方法,调用外部的onDragEnd方法,释放document绑定的两个事件,以及将临时的obj置为空

四、示例下载

 点此下载示例

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏