.NET開發實現類似Web Parts功能,超簡單實現

微軟推出SharePoint2003 ,SharePoint2007以來,一個新的技術Web Parts也隨着推出來了。剛一接觸到這個東西,作爲了一個開發人員,感到十分的好奇,這雖然算不上一次技術上的革命,但對用戶的體驗來講,卻是一個實實在在的好東東,能給使用的用戶帶來使用軟件的幸福感,自在感。一句話,真是太棒了!    看了很多軟件已經實現了這個功能,像google這種大公司也早就實現了這種功能,還有許多其它公司也實現了類似的功能。最近我們在做E8.HelpDesk For ITSM產品,這樣的好東西怎麼能放過了。。。    Web Parts的實現有多種方式,由於對.Net 2.0的Web Parts不是很熟,我們用最方便快捷的javascrpt腳本來實現,實現的原理是用Iframe,用戶可以自定義自己的桌面,每個Iframe裏可以放入一個網頁地址,具體要放什麼網頁,我們可以做一個管理界面,加一個自定義桌面表,可以根據自己的需要,不斷的延伸這個功能,做到非常的靈活,強大,這裏面有用的XmlHttp技術,讓用戶自定義自已的桌面時,休驗到快速的效果,最後的效果,類似於google的定義功能。現在把實現的腳本代碼貼出來,與大家共享,共同進步,這個功能已經在E8.Net工作流開發架構中提供全部源碼,E8.Net工作流客戶可以直接使用哦!  

// Input 0 /**  * get element  * document.getElementById的封裝

 * 如果瀏覽器不支持getElementById方法則返回null  */ function _getElementById(a) {  return document.getElementById?document.getElementById(a):null } /**  * get elements tag name  * document.getElementsByTagName的封裝

 * 根據tagName返回數組,*返回所有tag。

 * 如果瀏覽器不支持getElementsByTagName方法,則返回空數組

 */ function _getElementsByTagName(a) {  return document.getElementsByTagName?document.getElementsByTagName(a):new Array() }

//標誌瀏覽器是否爲Safari var isSafari=navigator.userAgent.indexOf("Safari")>=0;

/**  * 一個標準的colArrayAX替換頁面內容典範  * 變量a爲地址,aa爲回掉處理函數

 */ function _sendXMLRequest(theURL,aa) {  var xmlHttpObj=getXMLHttpObj();  if(!xmlHttpObj||isSafari&&!aa)  {//特殊瀏覽器特殊照顧

  (new Image()).src=theURL;  }  else  {//正常的瀏覽器,用XMLHTTP顯示內容   xmlHttpObj.open("GET",theURL,true);   xmlHttpObj.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded ");   xmlHttpObj.send(null);  } } /**  * 拿到一個可用的XMLHttpRequest對象  */ function getXMLHttpObj() {  var a=null;  if(window.ActiveXObject)  {   a=new ActiveXObject("Msxml2.XMLHTTP");   if(!a)   {    a=new ActiveXObject("Microsoft.XMLHTTP");   }  }  else if(window.XMLHttpRequest)  {   a=new XMLHttpRequest();  }  return a; }

function _del(a) {  msg="確認不在桌面上顯示該模塊麼?/n/n您可以通過自定義桌面恢復顯示!";   if(window.confirm(msg))   {    var module=_getElementById("module_"+a);    if(module)      module.style.display="none";    aI();  }  return false }

/**  * 查找CSS,將class名字爲a的aa自段定義值爲ab  * 例如setCSSAttrib("medit","display", "none");  * 則代表將.media的display定義爲none  *  */ function setCSSAttrib(clasName,attrName,attrValue) {  if(document.styleSheets)  {//瀏覽器有styleSheets,查找CSS列表並修改

  clasName="."+clasName;   for(var i=0;i<document.styleSheets.length;i++)   {    var classI=document.styleSheets[i];    var rulesI=classI.rules;    if(!rulesI)    {     rulesI=classI.cssRules;     if(!rulesI){return}    }    for(var j=0;j<rulesI.length;j++)    {     if(rulesI[j].selectorText.toLowerCase()==clasName.toLowerCase())     {      rulesI[j].style[attrName]=attrValue     }    }   }  }  else  {//瀏覽器不支持styleSheets,一個元素一個元素地找並修改-_-b   var elementI=_getElementsByTagName("*");   for(var i=0;i<elementI.length;i++)   {    if(elementI[i].className==clasName)    {     elementI[i].style[attrName]=attrValue    }   }  } }

var aC="";

var _pnlo; var _mod; var ay=false;

function _upc() { // setCSSAttrib("medit","display",_pnlo||_uli?"":"none"); // setCSSAttrib("panelo","display",_pnlo?"":"none"); // setCSSAttrib("panelc","display",_pnlo?"none":""); // setCSSAttrib("mod","display",_mod?"":"none"); // setCSSAttrib("unmod","display",_mod?"none":"");  //如果_pl爲true,並且_uli和_pnlo有一個爲true,則設置mttl CSS的鼠標形狀爲移動  //如果ay又爲false,則把id爲c_1、c_2和c_3的這三個元素構成一個數組,傳給initHead()函數  //initHead()函數負責對c_1、c_2、c_3這三個元素下的所有id以_h結尾的子元素設置拖拽事件代碼  //然後把ay設置爲true確保initHead()函數只調用一次。之後對mttl CSS設置鼠標形狀爲move // if(_pl&&(_uli||_pnlo))  {   if(!ay)   {    initHead([_getElementById("col_l"),_getElementById("col_r")]);    ay=true   }   setCSSAttrib("TableHeader","cursor","move")  } }

var aq=0;

var colArray=[]; var ap=0; var am=null;

/**  * 如果am爲null,將am創建爲<div>標籤,暫時先不顯示,鼠標形狀爲move,

 * 背景爲白色,底部padding爲0px,直接創建在<body>下。最後返回am  */ function createDiv() {  if(!am)  {   am=document.createElement("DIV");   am.style.display="none";   am.style.position="absolute";   am.style.cursor="move";   am.style.backgroundColor="#ffffff";   am.style.paddingBottom="0px";   document.body.appendChild(am)  }  return am }

/**  * 核心代碼  * al是這樣一個對象,它有一個屬性obj,默認爲null,和init/start/drag/end/fixE五個方法  * init() ---- 設置初始方法  * 設置元素a的onmousedown事件響應爲al.start方法,並設置am(那個直接隸屬於  *  <body>的隱藏<div>)的左邊在頁面左上角(如果沒有設置過的話),設置上a的空拖拽  *  事件  * start() --- 拖拽開始事件

 *  設置全局變量aa和al.obj爲事件源(同一時刻只能有一個box在drag狀態)。得到隱藏div  *  元素的座標和當前事件的鼠標座標,回掉aa變量在initHead()函數中註冊的onDragStart()函數(將  * 隱藏div內容填好,移動到鼠標位置)。將當前鼠標座標記錄在aa變量中。設置鼠標移動

 *  事件響應和鼠標擡起事件響應。

 * drag() ---- 拖拽中事件

 *  設置全局變量aa爲事件源。得到當前鼠標座標和移動中的div的位置,與上次鼠標座標相比

 *  計算出偏移量,修改移動中的div的座標。記錄鼠標當前位置,回掉aa的onDrag()函數。設置

 *  al.obj爲null,等待下個box的移動。

 * end() ----- 拖拽結束事件  *  設置onmousemove和onmouseup不響應事件,回掉aa的onDragEnd()函數。

 * fixE()  *  確保瀏覽器兼容性,保證變量a爲event事件,並修正事件的layerX/Y(似乎沒有用處)  */ var al = {"obj":null,  "init":function(a){   a.οnmοusedοwn=al.start;   if ( isNaN(parseInt(createDiv().style.left)) ) {    createDiv().style.left="0px";   }   if ( isNaN(parseInt(createDiv().style.top)) ) {    createDiv().style.top="0px";   }   a.onDragStart=new Function();   a.onDragEnd=new Function();   a.onDrag=new Function()   },  "start":function(a){   var aa=al.obj=this;   a=al.fixE(a);   var ab=parseInt(createDiv().style.top);   var ac=parseInt(createDiv().style.left);   aa.onDragStart(ac,ab,a.clientX,a.clientY);   aa.lastMouseX=a.clientX;   aa.lastMouseY=a.clientY;   document.οnmοusemοve=al.drag;   document.οnmοuseup=al.end;   return false   },  "drag":function(a){   a=al.fixE(a);   var aa=al.obj;   var ab=a.clientY;   var ac=a.clientX;   var ad=parseInt(createDiv().style.top);   var ae=parseInt(createDiv().style.left);   var af,ag;   af=ae+ac-aa.lastMouseX;   ag=ad+ab-aa.lastMouseY;   createDiv().style.left=af+"px";   createDiv().style.top=ag+"px";   aa.lastMouseX=ac;   aa.lastMouseY=ab;   aa.onDrag(af,ag,a.clientX,a.clientY);   return false   },  "end":function(){   document.οnmοusemοve=null;   document.οnmοuseup=null;   al.obj.onDragEnd(parseInt(createDiv().style.left),parseInt(createDiv().style.top));   al.obj=null   },  "fixE":function(a){   if (typeof a=="undefined") {    a=window.event;   }   if (typeof a.layerX=="undefined") {    a.layerX=a.offsetX;   }   if (typeof a.layerY=="undefined") {    a.layerY=a.offsetY;   }   return a   } };

var aw=false; /**  * 本函數作用是設置所有標題可拖動,給元素加入拖拽事件響應代碼。

 * 本函數只執行一次,aw爲true時函數直接返回。

 * 對第一列c_1、第二列c_2、第三列c_3做初始設置。每一列下均有若干id爲m_x的<div>標籤  * 每一個<div>標籤內容均爲一個<table>,該table中有一個<td>命名爲m_x_h,這就是可可拖拽的

 * 標題。得到這個<td>元素,加入拖拽事件代碼,就是本函數的作用。

 */ function initHead(a) {  if(aw)return;  aw=true;  //設置全局變量colArray爲當前要處理的列數組,也即三個id爲c_1、c_2和c_3的<td>元素  colArray=a;  //數組colArray中的每個元素都要執行。其實數組colArray只有三個元素,c_1、c_2和c_3,也即第一/二/三列  for(var i=0;i<colArray.length;i++)  {//對所有c_x的子結點遍歷,其實也就是命名爲m_x的div標籤。最後一個div標籤有其它用處,   //故此處length-1   for(var j=0;j<colArray[i].childNodes.length-1;j++)   {    var module_i=colArray[i].childNodes[j];    var head_i=_getElementById(module_i.id+"_head");    if(!head_i)     continue;

   //此刻,已經得到了id爲m_x_h的<td>元素,即box的標題td    //將整個大<div>記錄在ad對象的module屬性中,這個module屬性是????    head_i.module=module_i;    //用al對象的init方法初始化可拖拽標題td。

   al.init(head_i);

   //得到m_x_h的<a>元素,即id爲m_x_url的<a>    var url_i=_getElementById(module_i.id+"_url");    if(url_i)    {//設置<a>的h屬性爲ad(即上層標題的<td>元素),這個h屬性是????     url_i.h=head_i;     //當超級鏈接被點中,設置上層標題<td>的href和target屬性

    //爲當前超級鏈接的href和target屬性。這樣用戶也可以拖超級鏈接

    url_i.οnmοusedοwn=function() {      this.h.href=this.href;      this.h.target=this.target;     }    }

   var more_i=_getElementById(module_i.id+"_more");    if(more_i)    {       more_i.module=module_i;       more_i.οnmοuseοver=function() {var op_i=_getElementById(this.module.id+"_op");if(op_i) op_i.style.display="";}       more_i.onmouseout =function() {var op_i=_getElementById(this.module.id+"_op");if(op_i) op_i.style.display="none";}    }

   //核心代碼:拖拽開始回掉函數

   //關閉定時器,通過之前記錄的module屬性得到整個大<div>元素,調用aA()    //函數計算所有box的偏移值。記錄

   head_i.onDragStart=function(af,ag) {      //關閉定時器

     clearInterval(ap);      //通過之前記錄的module屬性得到整個大box的<div>元素      var module_i=this.module;      //計算頁面上所有其它box的偏移值

     aA(module_i);      //將下一個box的<div>元素記錄下來      module_i.origNextSibling=module_i.nextSibling;      //得到移動的<div>,指定到鼠標位置,從隱藏狀態顯示出來

     //使用alpha filter將透明度設置爲80,填充好內容和CSS

     //createDiv()生成一個DIV      var module_i_copy=createDiv();      module_i_copy.style.left=getOffset(module_i,true);      module_i_copy.style.top=getOffset(module_i,false);      module_i_copy.style.height=module_i.offsetHeight;      module_i_copy.style.width=module_i.offsetWidth;      module_i_copy.style.display="block";      module_i_copy.style.opacity=0.8;      module_i_copy.style.filter="alpha(opacity=80)";      module_i_copy.innerHTML=module_i.innerHTML;      module_i_copy.className=module_i.className;      //設置dragged爲false      this.dragged=false     };

   //核心代碼:拖拽中回掉函數    //全部由aG函數實現拖拽過程中的移動和“補位”

   head_i.onDrag=function(af,ag) {     setModulePos(this.module,af,ag);     //設置dragged爲true     this.dragged=true     };

   //核心代碼:拖拽結束函數

   head_i.onDragEnd=function(af,ag) {      if (this.dragged) {       //被拖拽叻,設置動態回位效果,把box安定下來       ap=aD(this.module,150,15)      } else {       //box僅僅被鼠標點叻一下超級鏈接,需要提供正常

      //的超級鏈接被點擊效果       ax();       if (this.href) {        if (this.target){         window.open(this.href,this.target)        } else {         document.location=this.href        }       }      }      this.target=null;      this.href=null;      //拖拽工作最後一步,取回box內的內容      if (this.module.nextSibling!=this.module.origNextSibling) {       aI()      }     }   }//second for end  }//first for end } /**  * 隱藏浮動的拖拽移動中<div>元素  */ function ax() {  createDiv().style.display="none" } /** 設置拖拽結束後的box動態回位效果

 */ function aD(a,aa,ab) {  var ac=parseInt(createDiv().style.left);  var ad=parseInt(createDiv().style.top);  var ae=(ac-getOffset(a,true))/ab;  var af=(ad-getOffset(a,false))/ab;  return setInterval(function(){if(ab<1){clearInterval(ap);ax();return}ab--;ac-=ae;ad-=af;createDiv().style.left=parseInt(ac)+"px";createDiv().style.top=parseInt(ad)+"px"},aa/ab) } /**  * 全局變量colArray爲列c_1、c_2和c_3數組(也即三個<td>元素)

 * 計算所有可移動的大box(即<div>)距離頁面左邊的偏移量和  * 距離頁面上方的偏移量。對於當前拖拽的box,在其所在列中,  * 所有在它下面的<div>的pagePosTop值需要減去當前拖拽box的高度

 */ function aA(a) {  for(var aa=0;aa<colArray.length;aa++)  {   var ab=0;   for(var ac=0;ac<colArray[aa].childNodes.length;ac++)   {    var ad=colArray[aa].childNodes[ac];    if(ad==a)     ab=ad.offsetHeight;    ad.pagePosLeft=getOffset(ad,true);    ad.pagePosTop=getOffset(ad,false)-ab   }  } } /**  * 得到某一元素距離頁面左邊或上邊的偏移量

 */ function getOffset(obj,isLeftOffset) {  var offsetValue=0;  while(obj!=null)  {   offsetValue+=obj["offset"+(isLeftOffset?"Left":"Top")];   obj=obj.offsetParent  }  return offsetValue } /**  * 核心代碼,拖拽中處理函數。變量a爲box(即<div>元素),aa和ab爲偏移量  */ function setModulePos(obj,posLeft,posTop) {  var module=null;  var ad=100000000;

 //對每一列遍歷

 for(var i=0;i<colArray.length;i++)  {//對每一個<div>box遍歷   for(var j=0;j<colArray[i].childNodes.length;j++)   {    var module_i=colArray[i].childNodes[j];    //對於正在移動中的box自身,不作處理

   if(module_i==obj)     continue;    //計算某些偏移量

   var ai=Math.sqrt(Math.pow(posLeft-module_i.pagePosLeft,2)+Math.pow(posTop-module_i.pagePosTop,2));    if(isNaN(ai))     continue;    if(ai<ad)    {     ad=ai;module=module_i    }   }  }

 //再適當的位置上添加當前移動中的box  if(module!=null&&obj.nextSibling!=module)  {   module.parentNode.insertBefore(obj,module);   //TODO: 這行代碼好像不起什麼作用

  DisplayModule(obj)  } } /**  * 在頁面上顯示變量a的父節點  * TODO: 第一行代碼有什麼用?

 */ function DisplayModule(obj) {  obj.parentNode.style.display="none";  obj.parentNode.style.display="" } /**  * 構造要取回內容的URL  */ function aI() {  var a="";  for(var i=0;i<colArray.length;i++)  {   a+=a!=""?":":"";   for(var j=0;j<colArray[i].childNodes.length-1;j++)   {    var module=colArray[i].childNodes[j];    if(module.id=="" || module.style.display=="none")       continue;    a+=module.id.substring(7)+",";   }  }  _sendXMLRequest("mydestop/frmXmlHttp.aspx?MYTABLE="+escape(a),null) }

// Input 0 /**  * get element  * document.getElementById的封裝

 * 如果瀏覽器不支持getElementById方法則返回null  */ function _getElementById(a) {  return document.getElementById?document.getElementById(a):null } /**  * get elements tag name  * document.getElementsByTagName的封裝

 * 根據tagName返回數組,*返回所有tag。

 * 如果瀏覽器不支持getElementsByTagName方法,則返回空數組

 */ function _getElementsByTagName(a) {  return document.getElementsByTagName?document.getElementsByTagName(a):new Array() }

//標誌瀏覽器是否爲Safari var isSafari=navigator.userAgent.indexOf("Safari")>=0;

/**  * 一個標準的colArrayAX替換頁面內容典範  * 變量a爲地址,aa爲回掉處理函數

 */ function _sendXMLRequest(theURL,aa) {  var xmlHttpObj=getXMLHttpObj();  if(!xmlHttpObj||isSafari&&!aa)  {//特殊瀏覽器特殊照顧

  (new Image()).src=theURL;  }  else  {//正常的瀏覽器,用XMLHTTP顯示內容   xmlHttpObj.open("GET",theURL,true);   xmlHttpObj.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded ");   xmlHttpObj.send(null);  } } /**  * 拿到一個可用的XMLHttpRequest對象  */ function getXMLHttpObj() {  var a=null;  if(window.ActiveXObject)  {   a=new ActiveXObject("Msxml2.XMLHTTP");   if(!a)   {    a=new ActiveXObject("Microsoft.XMLHTTP");   }  }  else if(window.XMLHttpRequest)  {   a=new XMLHttpRequest();  }  return a; }

function _del(a) {  msg="確認不在桌面上顯示該模塊麼?/n/n您可以通過自定義桌面恢復顯示!";   if(window.confirm(msg))   {    var module=_getElementById("module_"+a);    if(module)      module.style.display="none";    aI();  }  return false }

/**  * 查找CSS,將class名字爲a的aa自段定義值爲ab  * 例如setCSSAttrib("medit","display", "none");  * 則代表將.media的display定義爲none  *  */ function setCSSAttrib(clasName,attrName,attrValue) {  if(document.styleSheets)  {//瀏覽器有styleSheets,查找CSS列表並修改

  clasName="."+clasName;   for(var i=0;i<document.styleSheets.length;i++)   {    var classI=document.styleSheets[i];    var rulesI=classI.rules;    if(!rulesI)    {     rulesI=classI.cssRules;     if(!rulesI){return}    }    for(var j=0;j<rulesI.length;j++)    {     if(rulesI[j].selectorText.toLowerCase()==clasName.toLowerCase())     {      rulesI[j].style[attrName]=attrValue     }    }   }  }  else  {//瀏覽器不支持styleSheets,一個元素一個元素地找並修改-_-b   var elementI=_getElementsByTagName("*");   for(var i=0;i<elementI.length;i++)   {    if(elementI[i].className==clasName)    {     elementI[i].style[attrName]=attrValue    }   }  } }

var aC="";

var _pnlo; var _mod; var ay=false;

function _upc() { // setCSSAttrib("medit","display",_pnlo||_uli?"":"none"); // setCSSAttrib("panelo","display",_pnlo?"":"none"); // setCSSAttrib("panelc","display",_pnlo?"none":""); // setCSSAttrib("mod","display",_mod?"":"none"); // setCSSAttrib("unmod","display",_mod?"none":"");  //如果_pl爲true,並且_uli和_pnlo有一個爲true,則設置mttl CSS的鼠標形狀爲移動  //如果ay又爲false,則把id爲c_1、c_2和c_3的這三個元素構成一個數組,傳給initHead()函數  //initHead()函數負責對c_1、c_2、c_3這三個元素下的所有id以_h結尾的子元素設置拖拽事件代碼  //然後把ay設置爲true確保initHead()函數只調用一次。之後對mttl CSS設置鼠標形狀爲move // if(_pl&&(_uli||_pnlo))  {   if(!ay)   {    initHead([_getElementById("col_l"),_getElementById("col_r")]);    ay=true   }   setCSSAttrib("TableHeader","cursor","move")  } }

var aq=0;

var colArray=[]; var ap=0; var am=null;

/**  * 如果am爲null,將am創建爲<div>標籤,暫時先不顯示,鼠標形狀爲move,

 * 背景爲白色,底部padding爲0px,直接創建在<body>下。最後返回am  */ function createDiv() {  if(!am)  {   am=document.createElement("DIV");   am.style.display="none";   am.style.position="absolute";   am.style.cursor="move";   am.style.backgroundColor="#ffffff";   am.style.paddingBottom="0px";   document.body.appendChild(am)  }  return am }

/**  * 核心代碼  * al是這樣一個對象,它有一個屬性obj,默認爲null,和init/start/drag/end/fixE五個方法  * init() ---- 設置初始方法  * 設置元素a的onmousedown事件響應爲al.start方法,並設置am(那個直接隸屬於  *  <body>的隱藏<div>)的左邊在頁面左上角(如果沒有設置過的話),設置上a的空拖拽  *  事件  * start() --- 拖拽開始事件

 *  設置全局變量aa和al.obj爲事件源(同一時刻只能有一個box在drag狀態)。得到隱藏div  *  元素的座標和當前事件的鼠標座標,回掉aa變量在initHead()函數中註冊的onDragStart()函數(將  * 隱藏div內容填好,移動到鼠標位置)。將當前鼠標座標記錄在aa變量中。設置鼠標移動

 *  事件響應和鼠標擡起事件響應。

 * drag() ---- 拖拽中事件

 *  設置全局變量aa爲事件源。得到當前鼠標座標和移動中的div的位置,與上次鼠標座標相比

 *  計算出偏移量,修改移動中的div的座標。記錄鼠標當前位置,回掉aa的onDrag()函數。設置

 *  al.obj爲null,等待下個box的移動。

 * end() ----- 拖拽結束事件  *  設置onmousemove和onmouseup不響應事件,回掉aa的onDragEnd()函數。

 * fixE()  *  確保瀏覽器兼容性,保證變量a爲event事件,並修正事件的layerX/Y(似乎沒有用處)  */ var al = {"obj":null,  "init":function(a){   a.οnmοusedοwn=al.start;   if ( isNaN(parseInt(createDiv().style.left)) ) {    createDiv().style.left="0px";   }   if ( isNaN(parseInt(createDiv().style.top)) ) {    createDiv().style.top="0px";   }   a.onDragStart=new Function();   a.onDragEnd=new Function();   a.onDrag=new Function()   },  "start":function(a){   var aa=al.obj=this;   a=al.fixE(a);   var ab=parseInt(createDiv().style.top);   var ac=parseInt(createDiv().style.left);   aa.onDragStart(ac,ab,a.clientX,a.clientY);   aa.lastMouseX=a.clientX;   aa.lastMouseY=a.clientY;   document.οnmοusemοve=al.drag;   document.οnmοuseup=al.end;   return false   },  "drag":function(a){   a=al.fixE(a);   var aa=al.obj;   var ab=a.clientY;   var ac=a.clientX;   var ad=parseInt(createDiv().style.top);   var ae=parseInt(createDiv().style.left);   var af,ag;   af=ae+ac-aa.lastMouseX;   ag=ad+ab-aa.lastMouseY;   createDiv().style.left=af+"px";   createDiv().style.top=ag+"px";   aa.lastMouseX=ac;   aa.lastMouseY=ab;   aa.onDrag(af,ag,a.clientX,a.clientY);   return false   },  "end":function(){   document.οnmοusemοve=null;   document.οnmοuseup=null;   al.obj.onDragEnd(parseInt(createDiv().style.left),parseInt(createDiv().style.top));   al.obj=null   },  "fixE":function(a){   if (typeof a=="undefined") {    a=window.event;   }   if (typeof a.layerX=="undefined") {    a.layerX=a.offsetX;   }   if (typeof a.layerY=="undefined") {    a.layerY=a.offsetY;   }   return a   } };

var aw=false; /**  * 本函數作用是設置所有標題可拖動,給元素加入拖拽事件響應代碼。

 * 本函數只執行一次,aw爲true時函數直接返回。

 * 對第一列c_1、第二列c_2、第三列c_3做初始設置。每一列下均有若干id爲m_x的<div>標籤  * 每一個<div>標籤內容均爲一個<table>,該table中有一個<td>命名爲m_x_h,這就是可可拖拽的

 * 標題。得到這個<td>元素,加入拖拽事件代碼,就是本函數的作用。

 */ function initHead(a) {  if(aw)return;  aw=true;  //設置全局變量colArray爲當前要處理的列數組,也即三個id爲c_1、c_2和c_3的<td>元素  colArray=a;  //數組colArray中的每個元素都要執行。其實數組colArray只有三個元素,c_1、c_2和c_3,也即第一/二/三列  for(var i=0;i<colArray.length;i++)  {//對所有c_x的子結點遍歷,其實也就是命名爲m_x的div標籤。最後一個div標籤有其它用處,   //故此處length-1   for(var j=0;j<colArray[i].childNodes.length-1;j++)   {    var module_i=colArray[i].childNodes[j];    var head_i=_getElementById(module_i.id+"_head");    if(!head_i)     continue;

   //此刻,已經得到了id爲m_x_h的<td>元素,即box的標題td    //將整個大<div>記錄在ad對象的module屬性中,這個module屬性是????    head_i.module=module_i;    //用al對象的init方法初始化可拖拽標題td。

   al.init(head_i);

   //得到m_x_h的<a>元素,即id爲m_x_url的<a>    var url_i=_getElementById(module_i.id+"_url");    if(url_i)    {//設置<a>的h屬性爲ad(即上層標題的<td>元素),這個h屬性是????     url_i.h=head_i;     //當超級鏈接被點中,設置上層標題<td>的href和target屬性

    //爲當前超級鏈接的href和target屬性。這樣用戶也可以拖超級鏈接

    url_i.οnmοusedοwn=function() {      this.h.href=this.href;      this.h.target=this.target;     }    }

   var more_i=_getElementById(module_i.id+"_more");    if(more_i)    {       more_i.module=module_i;       more_i.οnmοuseοver=function() {var op_i=_getElementById(this.module.id+"_op");if(op_i) op_i.style.display="";}       more_i.onmouseout =function() {var op_i=_getElementById(this.module.id+"_op");if(op_i) op_i.style.display="none";}    }

   //核心代碼:拖拽開始回掉函數

   //關閉定時器,通過之前記錄的module屬性得到整個大<div>元素,調用aA()    //函數計算所有box的偏移值。記錄

   head_i.onDragStart=function(af,ag) {      //關閉定時器

     clearInterval(ap);      //通過之前記錄的module屬性得到整個大box的<div>元素      var module_i=this.module;      //計算頁面上所有其它box的偏移值

     aA(module_i);      //將下一個box的<div>元素記錄下來      module_i.origNextSibling=module_i.nextSibling;      //得到移動的<div>,指定到鼠標位置,從隱藏狀態顯示出來

     //使用alpha filter將透明度設置爲80,填充好內容和CSS

     //createDiv()生成一個DIV      var module_i_copy=createDiv();      module_i_copy.style.left=getOffset(module_i,true);      module_i_copy.style.top=getOffset(module_i,false);      module_i_copy.style.height=module_i.offsetHeight;      module_i_copy.style.width=module_i.offsetWidth;      module_i_copy.style.display="block";      module_i_copy.style.opacity=0.8;      module_i_copy.style.filter="alpha(opacity=80)";      module_i_copy.innerHTML=module_i.innerHTML;      module_i_copy.className=module_i.className;      //設置dragged爲false      this.dragged=false     };

   //核心代碼:拖拽中回掉函數    //全部由aG函數實現拖拽過程中的移動和“補位”

   head_i.onDrag=function(af,ag) {     setModulePos(this.module,af,ag);     //設置dragged爲true     this.dragged=true     };

   //核心代碼:拖拽結束函數

   head_i.onDragEnd=function(af,ag) {      if (this.dragged) {       //被拖拽叻,設置動態回位效果,把box安定下來       ap=aD(this.module,150,15)      } else {       //box僅僅被鼠標點叻一下超級鏈接,需要提供正常

      //的超級鏈接被點擊效果       ax();       if (this.href) {        if (this.target){         window.open(this.href,this.target)        } else {         document.location=this.href        }       }      }      this.target=null;      this.href=null;      //拖拽工作最後一步,取回box內的內容      if (this.module.nextSibling!=this.module.origNextSibling) {       aI()      }     }   }//second for end  }//first for end } /**  * 隱藏浮動的拖拽移動中<div>元素  */ function ax() {  createDiv().style.display="none" } /** 設置拖拽結束後的box動態回位效果

 */ function aD(a,aa,ab) {  var ac=parseInt(createDiv().style.left);  var ad=parseInt(createDiv().style.top);  var ae=(ac-getOffset(a,true))/ab;  var af=(ad-getOffset(a,false))/ab;  return setInterval(function(){if(ab<1){clearInterval(ap);ax();return}ab--;ac-=ae;ad-=af;createDiv().style.left=parseInt(ac)+"px";createDiv().style.top=parseInt(ad)+"px"},aa/ab) } /**  * 全局變量colArray爲列c_1、c_2和c_3數組(也即三個<td>元素)

 * 計算所有可移動的大box(即<div>)距離頁面左邊的偏移量和  * 距離頁面上方的偏移量。對於當前拖拽的box,在其所在列中,  * 所有在它下面的<div>的pagePosTop值需要減去當前拖拽box的高度

 */ function aA(a) {  for(var aa=0;aa<colArray.length;aa++)  {   var ab=0;   for(var ac=0;ac<colArray[aa].childNodes.length;ac++)   {    var ad=colArray[aa].childNodes[ac];    if(ad==a)     ab=ad.offsetHeight;    ad.pagePosLeft=getOffset(ad,true);    ad.pagePosTop=getOffset(ad,false)-ab   }  } } /**  * 得到某一元素距離頁面左邊或上邊的偏移量

 */ function getOffset(obj,isLeftOffset) {  var offsetValue=0;  while(obj!=null)  {   offsetValue+=obj["offset"+(isLeftOffset?"Left":"Top")];   obj=obj.offsetParent  }  return offsetValue } /**  * 核心代碼,拖拽中處理函數。變量a爲box(即<div>元素),aa和ab爲偏移量  */ function setModulePos(obj,posLeft,posTop) {  var module=null;  var ad=100000000;

 //對每一列遍歷

 for(var i=0;i<colArray.length;i++)  {//對每一個<div>box遍歷   for(var j=0;j<colArray[i].childNodes.length;j++)   {    var module_i=colArray[i].childNodes[j];    //對於正在移動中的box自身,不作處理

   if(module_i==obj)     continue;    //計算某些偏移量

   var ai=Math.sqrt(Math.pow(posLeft-module_i.pagePosLeft,2)+Math.pow(posTop-module_i.pagePosTop,2));    if(isNaN(ai))     continue;    if(ai<ad)    {     ad=ai;module=module_i    }   }  }

 //再適當的位置上添加當前移動中的box  if(module!=null&&obj.nextSibling!=module)  {   module.parentNode.insertBefore(obj,module);   //TODO: 這行代碼好像不起什麼作用

  DisplayModule(obj)  } } /**  * 在頁面上顯示變量a的父節點  * TODO: 第一行代碼有什麼用?

 */ function DisplayModule(obj) {  obj.parentNode.style.display="none";  obj.parentNode.style.display="" } /**  * 構造要取回內容的URL  */ function aI() {  var a="";  for(var i=0;i<colArray.length;i++)  {   a+=a!=""?":":"";   for(var j=0;j<colArray[i].childNodes.length-1;j++)   {    var module=colArray[i].childNodes[j];    if(module.id=="" || module.style.display=="none")       continue;    a+=module.id.substring(7)+",";   }  }  _sendXMLRequest("mydestop/frmXmlHttp.aspx?MYTABLE="+escape(a),null) }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章