拖动布局之保存布局页面cookies篇
2024-05-06 14:26:57
供稿：网友
我实现的方法是记录每列拥有的拖动对象，这样在初始或刷新的时候读取这列有哪些拖动对象，直接把拖动对象通过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";
