簡(jiǎn)易而又靈活的Javascript拖拽框架

1、簡(jiǎn)易而又靈活的Javascript拖拽框架簡(jiǎn)易而又靈活的Javascript拖拽框架（一）一、開篇最近在做js拖拽的時(shí)候，發(fā)現(xiàn)了一個(gè)強(qiáng)大而又靈活的拖拽框架，（之前用了代碼混淆器，還好代碼比較短，我就翻譯過來了）利用這個(gè)框架不僅能實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)，更能輕易的實(shí)現(xiàn)各種復(fù)雜的拖放功能。這一篇先實(shí)現(xiàn)最簡(jiǎn)單的拖拽，稍微復(fù)雜的拖放將在后面的文章里寫出來。二、代碼先把代碼貼出來CodevarDrag=obj:null,init:function(handle,dragBody,e)if(e=null)handle.onmousedown=Drag.start;handle.root=dragBody;if(i

2、sNaN(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

3、);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

4、(e);vartop=parseInt(handle.root.style.top);varleft=parseInt(handle.root.style.left);/alert(left)/一般情況下lefttop在初始的時(shí)候都為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:fun

5、ction(e)/這里的this為document所以拖動(dòng)對(duì)象只能保存在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.lastM

6、ouseX;currentTop=top+(mouseY-handle.lastMouseY);/上一瞬間的上邊距加上鼠標(biāo)在兩個(gè)瞬間移動(dòng)的距離得到現(xiàn)在的上邊距handle.root.style.left=currentLeft+px;handle.root.style.top=currentTop+px;/更新當(dāng)前的位置handle.lastMouseX=mouseX;handle.lastMouseY=mouseY;/保存這一瞬間的鼠標(biāo)值用于下一次計(jì)算位移handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);/調(diào)用外面對(duì)應(yīng)的函數(shù)

7、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)/格式化事件參數(shù)對(duì)象if(typeofe=undefined)e=window.event;if(typeofe.layerX=undefined)e.layerX=e.offsetX;if

8、(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);這樣可以讓鼠標(biāo)拖動(dòng)元素。Handle為拖動(dòng)的把手，dra

9、gBody是在拖動(dòng)時(shí)需要移動(dòng)的元素。如果需要更高級(jí)的控制拖動(dòng)或者拖放的話，可以給dragBody設(shè)置三個(gè)方法dragBody.onDragStart=function(left,top,mouseX,mouseY)onDrag（left,top,mouseX,mouseY）onDragEnd（left,top,mouseX,mouseY）這四個(gè)參數(shù)分別是：拖動(dòng)對(duì)象的left屬性、拖動(dòng)對(duì)象的top屬性（此時(shí)拖動(dòng)對(duì)象的position為absolute）、鼠標(biāo)當(dāng)前的x、鼠標(biāo)當(dāng)前的y。在每個(gè)過程中都可以通過四個(gè)參數(shù)來更精確的控制拖動(dòng)的每個(gè)過程，更主要的是我們不需要去管被鼠標(biāo)拖動(dòng)的元素是怎么移動(dòng)的，這

10、些都在框架中已經(jīng)做好了，這讓拖拽看起來更整潔?？蚣芫唧w是怎么運(yùn)轉(zhuǎn)的，其實(shí)很簡(jiǎn)單三、原理Drag有幾個(gè)成員Drag.obj用來存放鼠標(biāo)正在被拖動(dòng)的元素，只有在鼠標(biāo)按下過后才會(huì)賦值，鼠標(biāo)松開便為空了。便于在這幾個(gè)方法之間都能夠輕易的找到正在被拖動(dòng)的元素。Drag.init主要是用來訂閱handle的onmousedown事件，所以handle一旦點(diǎn)擊，則會(huì)執(zhí)行Drag.start方法。Drag.start是用來注冊(cè)document的mousemove和mouseup事件的，而且會(huì)調(diào)用我們定義的dragBody.onDragStart方法（這里的dragBody就是通過Drag.obj來獲得的），以

11、便處理框架以外需要處理的事情。Mousemove的時(shí)候會(huì)不斷的觸發(fā)Drag.drag方法，這個(gè)方法主要是控制dragBody的移動(dòng)（通過前后兩個(gè)瞬間的位移差來調(diào)整dragBody的位置），以及調(diào)用外部的dragBody.onDrag方法，處理框架以外的事情。Document的mouseup方法，調(diào)用外部的onDragEnd方法，釋放document綁定的兩個(gè)事件，以及將臨時(shí)的obj置為空四、示例下載簡(jiǎn)易而又靈活的Javascript拖拽框架（二）一、開篇在上一篇中，似乎不出來這個(gè)框架有多強(qiáng)大。是因?yàn)槲覀儗?shí)現(xiàn)的效果太簡(jiǎn)單了，還不足以體現(xiàn)框架的強(qiáng)大和靈活，在這一節(jié)中，用這個(gè)靈活的框架輕易的來實(shí)現(xiàn)拖

12、放！二、原理框架的原理在上一篇文章中介紹了，這里就不在重復(fù)，直接開始使用這個(gè)框架了首先通過Drag.init來注冊(cè)拖動(dòng)組件；分析：1、拖動(dòng)開始的時(shí)候?qū)ragGhost插入到鼠標(biāo)拖動(dòng)的那個(gè)元素，鼠標(biāo)拖動(dòng)的元素的position為absolutedragGhost為拖動(dòng)過程中指示拖動(dòng)元素的當(dāng)前位置的元素2、拖動(dòng)正在進(jìn)行的時(shí)候根據(jù)當(dāng)前鼠標(biāo)的位置或者正在被鼠標(biāo)拖動(dòng)的元素的位置 和需要排列的各種元素來比較，以確定將dragGhost放在哪個(gè)地方。具體的分析，就是遍歷拖動(dòng)元素的各個(gè)兄弟元素，從第一元素起，一旦發(fā)現(xiàn)某個(gè)元素的x和y比鼠標(biāo)的x和y大的話，則將dragGhost添加到這個(gè)元素之前。3、拖動(dòng)結(jié)束

13、的時(shí)候?qū)ragGhost替換為被拖動(dòng)的元素，然后將dragGhost隱藏。這樣就讓思路很清晰，不必再花精力去管元素是怎么隨著鼠標(biāo)走的，而且我們的卻很精確的控制了整個(gè)拖放過程，所以說這個(gè)框架很強(qiáng)大很靈活三、代碼CodefunctionfindPosX(obj)/輔助函數(shù)得到元素左邊與瀏覽器左邊的邊距varcurleft=0;if(obj&obj.offsetParent)while(obj.offsetParent)curleft+=obj.offsetLeft;obj=obj.offsetParent;elseif(obj&obj.x)curleft+=obj.x;returncurleft

14、;/+document.body.scrollLeft-document.body.clientLeft;functionfindPosY(obj)/輔助函數(shù)得到元素上邊與瀏覽器上邊的邊距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;vardragGho

15、st;varcontainer;window.onload=function()dragGhost=document.getElementById(dragGhost);container=document.getElementById(container);varnodes=container.getElementsByTagName(li);for(vari=0;inodes.length;i+)varli=nodesi;if(li.id!=dragGhost)newdragItem(li);varisIE=document.all;functiondragItem(item)Drag.i

16、nit(item,item);item.onDragStart=function(left,top,mouseX,mouseY)this.style.left=findPosX(this);this.style.top=findPosY(this);this.style.position=absolute;/將ghost插入到當(dāng)前位置dragGhost.style.display=block;dragGhost.style.width=isIE?this.offsetWidth:this.offsetWidth-2;/邊框問題dragGhost.style.height=isIE?this.o

17、ffsetHeight:this.offsetHeight-2;this.parentNode.insertBefore(dragGhost,this);item.onDrag=function(left,top,mouseX,mouseY)varnodes=container.getElementsByTagName(li);varwidth=this.offsetWidth;varheight=this.offsetHeight;for(vari=0;inodes.length+1;i+)if(nodesi=null)container.appendChild(dragGhost);/拖動(dòng)

18、最后一項(xiàng)break;if(nodesi.id=dragGhost|nodesi=this)continue;if(mouseXfindPosX(nodesi)+width&mouseYfindPosY(nodesi)+height)container.insertBefore(dragGhost,nodesi);break;item.onDragEnd=function(left,top,mouseX,mouseY)container.insertBefore(this,dragGhost);this.style.position=static;this.style.display=block

19、;dragGhost.style.display=none;簡(jiǎn)易而又靈活的Javascript拖拽框架（三）一、開篇 這是這個(gè)拖拽系列的第三篇了，第一篇簡(jiǎn)單的介紹了一下這個(gè)拖拽框架，第二篇用這個(gè)框架做了一個(gè)Tab標(biāo)簽的拖放。這次用這個(gè)拖拽框架做一個(gè)更復(fù)雜一點(diǎn)的效果跨列拖放。就像iGoogle和netvibes的個(gè)性頁面布局那樣。二、原理框架在第一篇做了介紹，這里直接使用。首先要找到每個(gè)可以拖動(dòng)的item，對(duì)于每個(gè)拖動(dòng)的item，對(duì)其注冊(cè)組件Drag.init(handle,dragBody);并且要把這個(gè)對(duì)象所在的列賦值給這個(gè)對(duì)象還是分三個(gè)步驟說這個(gè)拖放的過程 1、鼠標(biāo)拖動(dòng)開始的時(shí)候，除了要將

20、dragGhost放到當(dāng)前被拖動(dòng)的對(duì)象原來的位置上，還要記錄每一列的左邊距，當(dāng)然還是要設(shè)置被拖動(dòng)對(duì)象的position2、鼠標(biāo)拖動(dòng)的過程中先找到拖動(dòng)對(duì)象是在哪一列，通過現(xiàn)在拖動(dòng)對(duì)象的位置和在拖動(dòng)開始時(shí)記錄的列的左邊距相比較，得出當(dāng)前拖動(dòng)對(duì)象在哪一列。如果在原來那一列上，則不用管了，如果在別的列上，則將dragGhost插入到這個(gè)新的列中去（用column.appendChild插入到最后）。無論是本來就在這一列的元素還是從別的列拖過來的元素，都得讓拖動(dòng)對(duì)象與他所在的列的每一個(gè)元素的縱坐標(biāo)相比較，得出應(yīng)該在這一列的什么位置，將dragGhost插入(用column.insertBefore)。至

21、于怎么找到拖動(dòng)元素應(yīng)該放在這一列的什么位置，這個(gè)原理和上邊找列的原理差不多，只是比較的是縱坐標(biāo)的值，比較的對(duì)象是本列的所有對(duì)象（注意，遍歷的時(shí)候一定要排除dragGhost和本身，要不然在本列不能向下拖動(dòng)）。 3、拖動(dòng)完成將ghost替換為被拖動(dòng)的元素，設(shè)置相應(yīng)的樣式三、代碼Code/-Utility-functionfindPosX(obj)/輔助函數(shù)得到元素左邊與瀏覽器左邊的邊距varcurleft=0;if(obj&obj.offsetParent)while(obj.offsetParent)curleft+=obj.offsetLeft;obj=obj.offsetParent;el

22、seif(obj&obj.x)curleft+=obj.x;returncurleft;/+document.body.scrollLeft-document.body.clientLeft;functionfindPosY(obj)/輔助函數(shù)得到元素上邊與瀏覽器上邊的邊距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.s

23、crollTop-document.body.clientTop;vardragGhost=document.createElement(div);dragGhost.style.border=dashed1px#CCCCCC;dragGhost.style.background=white;dragGhost.style.display=none;dragGhost.style.margin=10px;varcontainer;varcolumns=;/-StartHere-window.onload=function()container=document.getElementById(c

24、ontainer);for(vari=0;icontainer.childNodes.length;i+)if(container.childNodesi.className=column)/篩選出所有的列ff下的childNodes不可靠:columns.push(container.childNodesi);for(vari=0;icolumns.length;i+)varcolumn=columnsi;for(varj=0;jcolumn.childNodes.length;j+)varitem=column.childNodesj;if(item.className=item)item

25、.column=column;/給每個(gè)拖拽對(duì)象要指明它屬于哪一列而且這個(gè)屬性會(huì)隨著拖動(dòng)而更新的newdragItem(item);varisIE=document.all;/-DragItem-functiondragItem(item)/item實(shí)際上是dragBody(拖動(dòng)的時(shí)候移動(dòng)的整體)/在這里需要根據(jù)item找到handle(能夠拖動(dòng)的把手)varhandle;for(vari=0;iitem.childNodes.length;i+)if(item.childNodesi.nodeName.toLowerCase()=h3)handle=item.childNodesi;break

26、;if(!handle)return;Drag.init(handle,item);item.onDragStart=function(left,top,mouseX,mouseY)/開始拖動(dòng)的時(shí)候設(shè)置透明度this.style.opacity=0.5;this.style.filter=alpha(opacity=50);dragGhost.style.height=isIE?this.offsetHeight:this.offsetHeight-2;/this指的是itemthis.style.width=this.offsetWidth;/因?yàn)槌跏嫉膚idth為autothis.styl

27、e.left=findPosX(this)-5;this.style.top=findPosY(this)-5;this.style.position=absolute;/將ghost插入到當(dāng)前位置dragGhost.style.display=block;this.column.insertBefore(dragGhost,this);/記錄每一列的左邊距在拖動(dòng)過程中判斷拖動(dòng)對(duì)象所在的列會(huì)用到this.columnsX=;for(vari=0;icolumns.length;i+)this.columnsX.push(findPosX(columnsi);item.onDrag=functi

28、on(left,top,mouseX,mouseY)/先要判斷在哪一列移動(dòng)varcolumnIndex=0;for(vari=0;ithis.columnsXi)columnIndex=i;/如果columnIndex在循環(huán)中沒有被賦值則表示當(dāng)前拖動(dòng)對(duì)象在第一列的左邊/此時(shí)也把它放到第一列varcolumn=columnscolumnIndex;if(this.column!=column)/之前拖動(dòng)對(duì)象不在這個(gè)列/將ghost放置到這一列的最下方column.appendChild(dragGhost);this.column=column;/然后在判斷放在這一列的什么位置varcurren

29、tNode=null;for(vari=0;ithis.column.childNodes.length;i+)if(this.column.childNodesi.className=item&this.column.childNodesi!=this/不能跟拖動(dòng)元素自己比較否則不能在本列向下移動(dòng)&topfindPosY(this.column.childNodesi)/從上到下找到第一個(gè)比拖動(dòng)元素的上邊距大的元素currentNode=this.column.childNodesi;break;if(currentNode)this.column.insertBefore(dragGhos

30、t,currentNode);else/拖到最下邊沒有任何一個(gè)元素的上邊距比拖動(dòng)元素的top大則添加到列的最后this.column.appendChild(dragGhost);item.onDragEnd=function(left,top,mouseX,mouseY)this.style.opacity=1;this.style.filter=alpha(opacity=100);this.column.insertBefore(this,dragGhost);this.style.position=static;this.style.display=block;this.style.w

31、idth=auto;dragGhost.style.display=none;如果這樣不方便觀看，可以下載示例。四、示例下載簡(jiǎn)易而又靈活的Javascript拖拽框架（四）一、開篇似乎拖拽已經(jīng)被寫爛了，沒得寫的了，可是我這次又來了上一次寫的是跨列拖放，這次我要帶給大家的是跨頁拖放。可以到這里來看看效果：示例效果說明：1、如果將方框拖動(dòng)到頁簽上立刻釋放掉的話，則會(huì)被添加到該頁的第一列的第一個(gè)位置； 2、如果將方框拖動(dòng)到頁簽上并且停留片刻的話，則頁面就會(huì)轉(zhuǎn)換到該頁，這個(gè)時(shí)候可以在頁簽上釋放，也可以將方框拖動(dòng)到此頁的具體位置釋放。二、原理 我是在跨列拖放的基礎(chǔ)上修改的代碼，雖然僅僅是從跨“列”升級(jí)為

32、跨“頁“，但是這就意味著多了一個(gè)dimension。所以代碼改動(dòng)比較大，尤其是初始化的代碼。為了弄清楚代碼中的命名同時(shí)也便于闡述原理，我畫了下面的圖1、在拖動(dòng)開始時(shí)，跟之前的跨列拖拽差不多，基本上不需要修改；2、在拖動(dòng)的過程中，就需要判斷拖動(dòng)module時(shí)的鼠標(biāo)是否是在某個(gè)tab上，如果在tab上，則把dragGhost（拖動(dòng)中占位的虛線框）隱藏了，并且設(shè)置轉(zhuǎn)換頁面的timeout（注意：這個(gè)timeout不要設(shè)置重復(fù)了，而且如果鼠標(biāo)就在本頁上就不需要設(shè)置），在設(shè)置這個(gè)timeout的響應(yīng)函數(shù)也要小心，必須先把拖動(dòng)的module放到新的頁面然后再轉(zhuǎn)換頁面，因?yàn)槭髽?biāo)雖然拖動(dòng)了module，但是在

33、html代碼中，這個(gè)module還是屬于原來的頁面（只是因?yàn)閜osition為absolute才讓它游離出來的），如果原來的頁面因?yàn)轫撁孓D(zhuǎn)換而變得不可見了，那么鼠標(biāo)拖動(dòng)的module也會(huì)不翼而飛的。3、在拖動(dòng)的過程中，如果鼠標(biāo)不在某個(gè)tab上，首先要將timeout及時(shí)清除了，要不然在拖動(dòng)時(shí)會(huì)莫名其妙的轉(zhuǎn)換頁面，剩下的跟頁面內(nèi)拖放是一樣的計(jì)算方法來處理，也是先計(jì)算所在的列，然后計(jì)算再這個(gè)列的位置，在此不再累述。4、在拖動(dòng)的過程中，注意維持module的column變量，這個(gè)變量對(duì)于拖放很重要，要及時(shí)而正確的更新。5、在拖動(dòng)結(jié)束的時(shí)候，如果鼠標(biāo)還在某個(gè)tab上（無論這個(gè)時(shí)候頁面是不是因?yàn)槭髽?biāo)的停

34、留而改變），則把module放在這一頁的第一列的第一個(gè)位置。如果不在tab上，那么和頁面內(nèi)拖放是一樣的。無論怎樣，在最后都要設(shè)置一些style以及更新個(gè)別變量，放置完畢。三、代碼 原理說起來容易，寫起來還是很麻煩的，而且得經(jīng)過很多次測(cè)試才能成功的。 不過我總結(jié)出來幾點(diǎn)： 1、對(duì)于任何一個(gè)對(duì)象，要分清楚這個(gè)對(duì)象是html對(duì)象還是我們自定義類的對(duì)象； 2、各種對(duì)象盡量少維持一些變量，要不然在每次動(dòng)作發(fā)生的時(shí)候都會(huì)去更新一堆變量，那將是很麻煩的（或許可以將這些變量的設(shè)置封裝成對(duì)象的方法）； 主要代碼如下：Codevarmodule=function(moduleElm)varself=this;th

35、is.elm=moduleElm;this.elm.module=this;this.column=moduleElm.column;this.page=this.column.page;this.handle=this.elm.getElementsByTagName(h3)0;/這里只是為了各個(gè)頁面的module看起來不一樣所以另外設(shè)置一下style/page的id也是為了這個(gè)目的而加的其他地方page的id是用不上的switch(this.page.id)casepage1:this.handle.style.backgroundColor=red;break;casepage2:thi

36、s.handle.style.backgroundColor=blue;break;casepage3:this.handle.style.backgroundColor=black;break;casepage4:this.handle.style.backgroundColor=#CCCCCC;break;if(this.handle&this.elm)Drag.init(this.handle,this.elm);elsereturn;this.elm.onDragStart=function(left,top,mouseX,mouseY)/開始拖動(dòng)的時(shí)候設(shè)置透明度this.style.

37、opacity=0.5;this.style.filter=alpha(opacity=50);dragGhost.style.height=isIE?this.offsetHeight:this.offsetHeight-2;/this指的是itemthis.style.width=this.offsetWidth;/因?yàn)槌跏嫉膚idth為autothis.style.left=findPosX(this)-5;this.style.top=findPosY(this)-5;this.style.position=absolute;/將ghost插入到當(dāng)前位置dragGhost.style.

38、display=block;self.column.insertBefore(dragGhost,this);/記錄每一列的左邊距在拖動(dòng)過程中判斷拖動(dòng)對(duì)象所在的列會(huì)用到this.columnsX=;for(vari=0;iself.column.page.columns.length;i+)this.columnsX.push(findPosX(self.column.page.columnsi);this.elm.onDrag=function(left,top,mouseX,mouseY)this.currentTab=null;/判斷是否在tab上for(vari=0;iXDrag.ta

39、bs.length;i+)vartabElm=XDrag.tabsi.elm;if(findPosX(tabElm)mouseX)&(findPosY(tabElm)mouseY)this.currentTab=XDrag.tabsi;break;if(this.currentTab!=null)if(dragGhost.parentNode)dragGhost.parentNode.removeChild(dragGhost);functionchangeTab()/先得把module放到當(dāng)前的這一頁/否則會(huì)隨著tab的改變而消失varcurrentColumn=self.elm.curre

40、ntTab.page.columns0;varflag=false;for(vari=0;icurrentColumn.childNodes.length;i+)if(currentColumn.childNodesi.nodeName.toLowerCase()=div)currentColumn.insertBefore(self.elm,currentColumn.childNodesi);flag=true;break;if(!flag)currentColumn.appendChild(this);self.column=currentColumn;/將拖動(dòng)的module添加到這一頁的第一列因?yàn)閐isplay還為absolute所以module還跟著鼠標(biāo)在走self.elm.currentTab.select();XDrag.changeTabTimeoutId=null;/如果Timeout不為空（防止重復(fù)設(shè)置Timeout）而且移動(dòng)到的tab不是當(dāng)前的tab（如果是當(dāng)前tab則不需要改變tab頁了）if(XDrag.changeTabTimeoutId=null&this.currentTab!=XDrag.sele