拖动布局之保存布局页面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 相关文章推荐
基于jquery的无刷新分页技术
Jun 11 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
underscore之function_动力节点Java学院整理
Jul 11 Javascript
vue树形结构获取键值的方法示例
Jun 21 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 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
短波收音机简介
2021/03/01 无线电
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
PHP文件上传类实例详解
2016/04/08 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
使用jQuery validate 验证注册表单实例演示
2013/03/25 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
javascript表单验证大全
2015/08/12 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
2016/05/10 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
Vue3为什么这么快
2020/09/23 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
js实现碰撞检测
2021/01/29 Javascript
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
家长给小学生的评语
2014/01/30 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
秋冬农业生产标语
2014/10/09 职场文书
委托书的样本
2015/01/28 职场文书