Posted on 2008-09-14 11:28
G_G 閱讀(2678)
評論(0) 編輯 收藏 所屬分類:
javascript
上面加上我的注解（希望能對大家理解有幫助）：
/**************************************************
?*?dom-drag.js
?*?09.25.2001
?*?www.youngpup.net
?*?Script?featured?on?Dynamic?Drive?(http://www.dynamicdrive.com)?12.08.2005
?**************************************************
?*?10.28.2001?-?fixed?minor?bug?where?events
?*?sometimes?fired?off?the?handle,?not?the?root.
???*????注解:??Skynet
?*????email?:?liukaiyi@gmail.com
?*????????blog?:?www.aygfsteel.com/Good-Game
?**************************************************/
var?Drag?=?{
????obj?:?null,
????
????/*?api?說明：?
????*?????方法調用可以參考：http://www.dynamicdrive.com/dynamicindex11/domdrag/
????*?????????o?拖拽?Handle?
????*????????oRoot?被拖拽?element??(可選,?默認不填?o為被拖拽對象??type=object)
????*????????minX,?maxX,?minY,?maxY?限制拖拽范圍?(可選,默認不填為全屏?type=int?)
????*?????????bSwapHorzRef,?bSwapVertRef?判斷是否允許?橫，縱向拖拽(可選,默認不填無限制?type=boolean?)
????*?????fXMapper(x),?fYMapper(y)??為外置函數?拖拽效果體現前調用?(x,y)?為當前element位置(可選?type=Function）
????*/
????init?:?function(o,?oRoot,?minX,?maxX,?minY,?maxY,?bSwapHorzRef,?bSwapVertRef,?fXMapper,?fYMapper)
????{
????????/*?拖拽事件?掛載??(本js?主線?生命周期?描述)
????????*????1.?預定?o.onmousedown事件觸發運行??Drag.start。
????????*????2.?觸發?element->?onmousedown->Drag.start
????????*????????2.1????先得到?element?當前"改變初"位置,記入到?o.lastMouseX?;o.lastMouseY，掛載Drag.obj,Darp.root?為當前?element。
????????*????????2.2?????預定?document.onmousemove????=?Drag.drag;?document.onmouseup?=?Drag.end。
????????*????3.??觸發?document.onmousemove?運行?Drag.drag->?拖拽效果體現。
????????*????4.??觸發?document.onmouseup?運行?Drag.end->?掛載?document.onmousemove;document.onmouseup;Drag.obj取消。
????????*/
????????o.onmousedown?=?Drag.start;
????????
????????//是否能?橫，縱向拖拽
????????o.hmode????????????=?bSwapHorzRef???false?:?true?;
????????o.vmode????????????=?bSwapVertRef???false?:?true?;
????????//掛載?o.root?
????????o.root?=?oRoot?&&?oRoot?!=?null???oRoot?:?o?;
????????
????????if?(o.hmode??&&?isNaN(parseInt(o.root.style.left??)))?o.root.style.left???=?"0px";
????????if?(o.vmode??&&?isNaN(parseInt(o.root.style.top???)))?o.root.style.top????=?"0px";
????????if?(!o.hmode?&&?isNaN(parseInt(o.root.style.right?)))?o.root.style.right??=?"0px";
????????if?(!o.vmode?&&?isNaN(parseInt(o.root.style.bottom)))?o.root.style.bottom?=?"0px";
????????
????????//?限定?移動范圍
????????o.minX????=?typeof?minX?!=?'undefined'???minX?:?null;
????????o.minY????=?typeof?minY?!=?'undefined'???minY?:?null;
????????o.maxX????=?typeof?maxX?!=?'undefined'???maxX?:?null;
????????o.maxY????=?typeof?maxY?!=?'undefined'???maxY?:?null;
????????o.xMapper?=?fXMapper???fXMapper?:?null;
????????o.yMapper?=?fYMapper???fYMapper?:?null;
????????
????????/*自定義拖拽－事件添加（相當于我們在java中的?抽象類?中未實現的方法??比如：
????????*????obj.onDrag?=?function(x,?y)?{
?????????*????????scrolldiv.style.top=y?*?(-1)?+"px";
????????*????}
????????*/
????????o.root.onDragStart????=?new?Function();
????????o.root.onDragEnd????=?new?Function();
????????o.root.onDrag????????=?new?Function();
????},
????//由?function?init?>>?o.onmousedown????=?Drag.start;
????start?:?function(e)
????{
????????//得到被拖拽?element
????????var?o?=?Drag.obj?=?this;
????????e?=?Drag.fixE(e);
????????
????????//element?移動初位置?
????????var?y?=?parseInt(o.vmode???o.root.style.top??:?o.root.style.bottom);
????????var?x?=?parseInt(o.hmode???o.root.style.left?:?o.root.style.right?);
????????//可能的外置函數調用
????????o.root.onDragStart(x,?y);
????????//event?初位置?記入
????????o.lastMouseX????=?e.clientX;
????????o.lastMouseY????=?e.clientY;
????????
????????if?(o.hmode)?{
????????????if?(o.minX?!=?null)????o.minMouseX????=?e.clientX?-?x?+?o.minX;
????????????if?(o.maxX?!=?null)????o.maxMouseX????=?o.minMouseX?+?o.maxX?-?o.minX;
????????}?else?{
????????????if?(o.minX?!=?null)?o.maxMouseX?=?-o.minX?+?e.clientX?+?x;
????????????if?(o.maxX?!=?null)?o.minMouseX?=?-o.maxX?+?e.clientX?+?x;
????????}
????????if?(o.vmode)?{
????????????if?(o.minY?!=?null)????o.minMouseY????=?e.clientY?-?y?+?o.minY;
????????????if?(o.maxY?!=?null)????o.maxMouseY????=?o.minMouseY?+?o.maxY?-?o.minY;
????????}?else?{
????????????if?(o.minY?!=?null)?o.maxMouseY?=?-o.minY?+?e.clientY?+?y;
????????????if?(o.maxY?!=?null)?o.minMouseY?=?-o.maxY?+?e.clientY?+?y;
????????}
????????
????????/*>>>>>>>>>>>比較關鍵的掛載<<<<<<<<<<<<<<
????????*????
????????*????使用?document.onmousemove?事件?而不使用?element的，是應為當拖動太快，可能會脫離element.
????????*/
????????document.onmousemove????=?Drag.drag;
????????document.onmouseup????????=?Drag.end;
????????return?false;
????},
????//由?function?start>>?document.onmousemove????=?Drag.drag;
????drag?:?function(e)
????{
????????e?=?Drag.fixE(e);
????????var?o?=?Drag.obj;
????????var?ey????=?e.clientY;
????????var?ex????=?e.clientX;
????????//得到?element?當前位置（vmode,hmode判斷是否可以橫縱向拖拽）
????????var?y?=?parseInt(o.vmode???o.root.style.top??:?o.root.style.bottom);
????????var?x?=?parseInt(o.hmode???o.root.style.left?:?o.root.style.right?);
????????var?nx,?ny;
????????
????????if?(o.minX?!=?null)?ex?=?o.hmode???Math.max(ex,?o.minMouseX)?:?Math.min(ex,?o.maxMouseX);
????????if?(o.maxX?!=?null)?ex?=?o.hmode???Math.min(ex,?o.maxMouseX)?:?Math.max(ex,?o.minMouseX);
????????if?(o.minY?!=?null)?ey?=?o.vmode???Math.max(ey,?o.minMouseY)?:?Math.min(ey,?o.maxMouseY);
????????if?(o.maxY?!=?null)?ey?=?o.vmode???Math.min(ey,?o.maxMouseY)?:?Math.max(ey,?o.minMouseY);
????????
????????//本js中?最主要的地方：?
????????//得到?鼠標移動?向量?drap(x,y)?=?fun_drap:event(x,y)?-?fun_start:event(x,y)
????????//并于?得到拖拽效果:??element(x,y)?+?drap(x,y)?
????????nx?=?x?+?((ex?-?o.lastMouseX)?*?(o.hmode???1?:?-1));
????????ny?=?y?+?((ey?-?o.lastMouseY)?*?(o.vmode???1?:?-1));
????????if?(o.xMapper)????????nx?=?o.xMapper(y)
????????else?if?(o.yMapper)????ny?=?o.yMapper(x)
????????
????????//效果體現
????????Drag.obj.root.style[o.hmode???"left"?:?"right"]?=?nx?+?"px";
????????Drag.obj.root.style[o.vmode???"top"?:?"bottom"]?=?ny?+?"px";
????????Drag.obj.lastMouseX????=?ex;
????????Drag.obj.lastMouseY????=?ey;
????????//調用外置函數
????????Drag.obj.root.onDrag(nx,?ny);
????????return?false;
????},
????
????//由?function?start>>?document.onmouseup????????=?Drag.end;
????end?:?function()
????{
????????document.onmousemove?=?null;
????????document.onmouseup???=?null;
????????Drag.obj.root.onDragEnd(????parseInt(Drag.obj.root.style[Drag.obj.hmode???"left"?:?"right"]),?
????????????????????????????????????parseInt(Drag.obj.root.style[Drag.obj.vmode???"top"?:?"bottom"]));
????????Drag.obj?=?null;
????},
????
????//跨?瀏覽器?得到?event
????fixE?:?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;
????????return?e;
????}
};