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

简易而又灵活的Javascript拖拽框架简易而又灵活的Javascript拖拽框架（一）一、开篇最近在做js拖拽的时候，发现了一个强大而又灵活的拖拽框架，（之前用了代码混淆器，还好代码比较短，我就翻译过来了）利用这个框架不仅能实现简单的拖动，更能轻易的实现各种复杂的拖放功能。这一篇先实现最简单的拖拽，稍微复杂的拖放将在后面的文章里写出来。二、代码先把代码贴出来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在初始的时候都为0handle.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;}};使用方法Drag.init(handle,dragBody);这样可以让鼠标拖动元素。Handle为拖动的把手，dragBody是在拖动时需要移动的元素。如果需要更高级的控制拖动或者拖放的话，可以给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置为空四、示例下载简易而又灵活的Javascript拖拽框架（二）一、开篇在上一篇中，似乎不出来这个框架有多强大。是因为我们实现的效果太简单了，还不足以体现框架的强大和灵活，在这一节中，用这个灵活的框架轻易的来实现拖放！二、原理框架的原理在上一篇文章中介绍了，这里就不在重复，直接开始使用这个框架了首先通过Drag.init来注册拖动组件；分析：1、拖动开始的时候将dragGhost插入到鼠标拖动的那个元素，鼠标拖动的元素的position为absolutedragGhost为拖动过程中指示拖动元素的当前位置的元素2、拖动正在进行的时候根据当前鼠标的位置或者正在被鼠标拖动的元素的位置和需要排列的各种元素来比较，以确定将dragGhost放在哪个地方。具体的分析，就是遍历拖动元素的各个兄弟元素，从第一元素起，一旦发现某个元素的x和y比鼠标的x和y大的话，则将dragGhost添加到这个元素之前。3、拖动结束的时候将dragGhost替换为被拖动的元素，然后将dragGhost隐藏。这样就让思路很清晰，不必再花精力去管元素是怎么随着鼠标走的，而且我们的却很精确的控制了整个拖放过程，所以说这个框架很强大很灵活三、代码functionfindPosX(obj){//辅助函数得到元素左边与浏览器左边的边距varcurleft=0;if(obj&&obj.offsetParent){while(obj.offsetParent){curleft+=obj.offsetLeft;obj=obj.offsetParent;}}elseif(obj&&obj.x)curleft+=obj.x;returncurleft;//+document.body.scrollLeft-document.body.clientLeft;}functionfindPosY(obj){//辅助函数得到元素上边与浏览器上边的边距varcurtop=0;if(obj&&obj.offsetParent){while(obj.offsetParent){curtop+=obj.offsetTop;obj=obj.offsetParent;}}elseif(obj&&obj.y)curtop+=obj.y;returncurtop;//+document.body.scrollTop-document.body.clientTop;}vardragGhost;varcontainer;window.onload=function(){dragGhost=document.getElementById(dragGhost);container=document.getElementById(container);varnodes=container.getElementsByTagName(li);for(vari=0;inodes.length;i++){varli=nodes[i];if(li.id!=dragGhost){newdragItem(li);}}}varisIE=document.all;functiondragItem(item){Drag.init(item,item);item.onDragStart=function(left,top,mouseX,mouseY){this.style.left=findPosX(this);this.style.top=findPosY(this);this.style.position=absolute;//将ghost插入到当前位置dragGhost.style.display=block;dragGhost.style.width=isIE?this.offsetWidth:this.offsetWidth-2;//边框问题dragGhost.style.height=isIE?this.offsetHeight:this.offsetHeight-2;this.parentNode.insertBefore(dragGhost,this);}item.onDrag=function(left,top,mouseX,mouseY){varnodes