拖动布局之保存布局页面cookies篇


Posted in Javascript onOctober 29, 2010

我实现的方法是记录每列拥有的拖动对象,这样在初始或刷新的时候读取这列有哪些拖动对象,直接把拖动对象通过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,有时好像不行,等有时间再研究下)!!
Javascript 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
Javascript 面向对象 继承
May 13 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
Bootstrap布局方式详解
May 27 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 #Javascript
JavaScript 原型链学习总结
Oct 29 #Javascript
JavaScript 原型学习总结
Oct 29 #Javascript
用JQuery调用Session的实现代码
Oct 29 #Javascript
基于jquery 的一个progressbar widge
Oct 29 #Javascript
JQuery开发的数独游戏代码
Oct 29 #Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 #Javascript
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
php数组去重复数据示例
2014/02/25 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
微信小程序 wx:key详细介绍
2016/10/28 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
2020/08/07 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
详解python中@的用法
2019/03/27 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
Django密码存储策略分析
2020/01/09 Python
室内设计自我鉴定
2013/10/15 职场文书
开业庆典答谢词
2014/01/18 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
抄作业检讨书
2014/02/17 职场文书
活动总结模板
2014/05/09 职场文书
大气污染防治方案
2014/05/19 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
SQL Server中锁的用法
2022/05/20 SQL Server