// 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) }