拖动布局之保存布局页面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 相关文章推荐
获取表单控件原始(初始)值的方法
Aug 21 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
jQuery插件Echarts实现的渐变色柱状图
Mar 23 jQuery
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 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
基于PHP编程注意事项的小结
2013/04/27 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
php计算函数执行时间的方法
2015/03/20 PHP
用PHP代码在网页上生成图片
2015/07/01 PHP
PHP使用stream_context_create()模拟POST/GET请求的方法
2016/04/02 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
js实现圆盘记速表
2015/08/03 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
ES6中的箭头函数实例详解
2017/04/06 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
python中定义结构体的方法
2013/03/04 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python 遍历pd.Series的index和value
2019/11/26 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
python的列表List求均值和中位数实例
2020/03/03 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
高三家长寄语
2014/04/03 职场文书
教研活动总结
2014/04/28 职场文书
企业员工薪酬方案
2014/06/04 职场文书