簡易而又靈活的javascript拖拽框架

《簡易而又靈活的javascript拖拽框架》由會員上傳分享，免費在線閱讀，更多相關內容在應用文檔-天天文庫。

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

2、le.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()

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

4、???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;????????

5、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.

6、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;????????v

7、ar?top=parseInt(handle.root.style.top);????????var?left=parseInt(handle.root.style.left);//這里的top和left是handle.root距離瀏覽器邊框的上邊距和左邊距????????????????var?currentLeft,currentTop;????????currentLeft=left+mouseX-handle.lastMouseX;????????currentTop=top+(mo