快捷導(dǎo)航

拖動布局之保存布局頁面cookies篇

更新時間：2010年10月29日 21:16:53 作者：

拖動后怎么把布局結(jié)果保存呢？？我開始考慮是記錄每個拖動對象的的坐標(biāo)，可做起來我感覺好麻煩，所以就沒有采用這種方法。

我實現(xiàn)的方法是記錄每列擁有的拖動對象，這樣在初始或刷新的時候讀取這列有哪些拖動對象，直接把拖動對象通過appenChild加進(jìn)去就可以了，比如拖動后列的id為col2,在這一列的拖動對象的id為col1_2,col3_1,col2_1,我就把col2=col1_2|col3_1|col2_1記錄下來，在刷新頁面的時候就讀取col2的值，循環(huán)通過document.getElementById(col2).appendChild(document.getElementById(col1_2))實現(xiàn)顯示布局的結(jié)果。呵呵！也不知我說的明不明白，不過看后面的代碼應(yīng)該就會清楚了。好了廢話少說，看實現(xiàn)的代碼吧！！
首先要保存拖動后的記錄，一個是通過數(shù)據(jù)庫，一個是cookie,我這用的是cookie。下面是一個cookie的類

復(fù)制代碼代碼如下:

 
function CookieClass(){ 
this.expires = 0 ; //有效時間,以分鐘為單位 
this.path = ""; //設(shè)置訪問路徑 
this.domain = ""; //設(shè)置訪問主機 
this.secure = false; //設(shè)置安全性 
this.setCookie = function(name,value){ 
var str = name+"="+escape(value); 
if (this.expires>0){ //如果設(shè)置了過期時間 
var date=new Date(); 
var ms=this.expires * 60 * 1000; //每分鐘有60秒，每秒1000毫秒 
date.setTime(date.getTime()+ms); 
str+="; expires="+date.toGMTString(); 
} 
if(this.path!="")str+="; path="+this.path; //設(shè)置訪問路徑 
if(this.domain!="")str+="; domain="+this.domain; //設(shè)置訪問主機 
if(this.secure!="")str+="; true"; //設(shè)置安全性 
document.cookie=str; 
} 
this.getCookie=function(name){ 
var cookieArray=document.cookie.split("; "); //得到分割的cookie名值對 
var cookie=new Object(); 
for(var i=0;i<cookieArray.length;i++){ 
var arr=cookieArray[i].split("="); //將名和值分開 
if(arr[0]==name)return unescape(arr[1]); //如果是指定的cookie，則返回它的值 
} 
return ""; 
} 
this.deleteCookie=function(name){ 
var date=new Date(); 
var ms= 1 * 1000; 
date.setTime(date.getTime() - ms); 
var str = name+"=no; expires=" + date.toGMTString(); //將過期時間設(shè)置為過去來刪除一個cookie 
document.cookie=str; 
} 
this.showCookie=function(){ 
alert(unescape(document.cookie)); 
} 
} 

好了，現(xiàn)在就用這個東西保存拖動后的結(jié)果。要保存結(jié)果當(dāng)然是在onmouseup事件，因為只有鼠標(biāo)松開才說明這一次拖動結(jié)束了，所以在onmouseup事件中增加以下的代碼。

復(fù)制代碼代碼如下:

 
//------------------------- 
var cook = new CookieClass(); 
cook.expires =1;//一分鐘有效 
//--------------------------- 
var DragContainer=["col1","col2","col3"];//用來實現(xiàn)布局的列的div的id 
var dragContainerLen=DragContainer.length; 
//以上的代碼應(yīng)該不用解釋 
//鼠標(biāo)松開 
function mouseUp(){ 
if(dragObject){ 
if(dragObject.parentNode.style.display=="none") dragObject.parentNode.style.display="block"; 
dragObject.parentNode.style.border="1px solid #FFCC66"; 
tmpDiv.style.display="none"; 
for(var m=0;m<DragContainer.length;m++){ 
var colDiv=document.getElementById(DragContainer[m]); 
var colDivLen=colDiv.getElementsByTagName("div").length 
var colSty=colDiv.getAttribute("style"); 
if(colDivLen>0&&colSty!=null){ 
colDiv.removeAttribute("style"); 
break; 
} 
} 
//這是增加的代碼----------------------------------------------- 
for(var ed=0;ed<dragContainerLen;ed++){ 
var dragConId=DragContainer[ed]; 
var dragObj=document.getElementById(dragConId); 
dragObj.removeAttribute("style"); 
var dragDiv=dragObj.getElementsByTagName("div"); 
if(dragDiv){ 
var dragDivLen=dragDiv.length; 
var dragDivIdArr=[]; 
for(var dd=0;dd<dragDivLen;dd++){ 
var dragDivId=dragDiv[dd].getAttribute("id"); 
dragDivIdArr[dd]=dragDivId; 
} 
tmp=dragDivIdArr.join("|"); 
if(tmp=="") tmp=0; 
} 
cook.setCookie(dragConId,tmp); 
} 
//這是增加的代碼------------------------------------------------------ 
dragObject=null; 
return false; 
} 
} 

增加的代碼就是把col1=col2_1|col3_2這類的東西寫入到cookie。剩下的就是在頁面刷新或頁面開始加載的時候讀取cookie，實現(xiàn)顯示拖動布局的最后結(jié)果，這段代碼當(dāng)然是在onload中

復(fù)制代碼代碼如下:

 
var nl=0; 
var dragNull=[]; 
window.onload=function(){ 
tmpDiv=document.createElement("div"); 
tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;'; 
document.body.appendChild(tmpDiv); 
//這是增加的代碼 
for(var init=0;init<dragContainerLen;init++){ 
var initDragId=DragContainer[init]; 
var initDragContainer=document.getElementById(initDragId); 
var initDragDiv=cook.getCookie(initDragId); 
if(initDragDiv!=0){ 
var initDragArr=initDragDiv.split("|"); 
var initDragArrLen=initDragArr.length; 
for(var k=0;k<initDragArrLen;k++){ 
var chi=document.getElementById(initDragArr[k]); 
initDragContainer.appendChild(chi); 
} 
} 
else{ 
dragNull[nl]=initDragId; 
nl=nl+1; 
} 
} 
if(nl>0&&nl<3){ 
var nullLen=dragNull.length; 
for(var nn=0;nn<nullLen;nn++){ 
var nullId=dragNull[nn]; 
var nulldiv=document.getElementById(nullId); 
nulldiv.style.height="20px"; 
} 
} 
//這是增加的代碼 
} 