我實現的方法是記錄每列擁有的拖動對象，這樣在初始或刷新的時候讀取這列有哪些拖動對象，直接把拖動對象通過appenChild加進去就可以了，比如拖動後列的id為col2,在這一列的拖動對象的id為col1_2,col3_1,col2_1,我就把col2=col1_2|col3_1|col2_1記錄下來，在刷新頁面的時候就讀取col2的值，循環通過document.getElementById(col2).appendChild(document.getElementById(col1_2))實現顯示布局的結果。呵呵！也不知我說的明不明白，不過看後面的代碼應該就會清楚了。好了廢話少說，看實現的代碼吧！！
首先要保存拖動後的記錄，一個是通過數據庫，一個是cookie,我這用的是cookie。下面是一個cookie的類
復制代碼 代碼如下:
function CookieClass(){
this.expires = 0 ; //有效時間,以分鐘為單位
this.path = ""; //設置訪問路徑
this.domain = ""; //設置訪問主機
this.secure = false; //設置安全性
this.setCookie = function(name,value){
var str = name+"="+escape(value);
if (this.expires>0){ //如果設置了過期時間
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; //設置訪問路徑
if(this.domain!="")str+="; domain="+this.domain; //設置訪問主機
if(this.secure!="")str+="; true"; //設置安全性
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(); //將過期時間設置為過去來刪除一個cookie
document.cookie=str;
}
this.showCookie=function(){
alert(unescape(document.cookie));
}
}
好了，現在就用這個東西保存拖動後的結果。 要保存結果當然是在onmouseup事件，因為只有鼠標松開才說明這一次拖動結束了，所以在onmouseup事件中增加以下的代碼。
復制代碼 代碼如下:
//-------------------------
var cook = new CookieClass();
cook.expires =1;//一分鐘有效
//---------------------------
var DragContainer=["col1","col2","col3"];//用來實現布局的列的div的id
var dragContainerLen=DragContainer.length;
//以上的代碼應該不用解釋
//鼠標松開
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，實現顯示拖動布局的最後結果，這段代碼當然是在onload中
復制代碼 代碼如下:
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";
}
}
//這是增加的代碼
}
好了，就這麼多，看不明白我說的就看代碼吧，不足的地方歡迎指教（感覺有bug,有時好像不行，等有時間再研究下）！！