拖动布局之保存布局页面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 相关文章推荐
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
js中this用法实例详解
May 05 Javascript
JavaScript获得url查询参数的方法
Jul 02 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 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开发GUI
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
vue + typescript + 极验登录验证的实现方法
2019/06/27 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python异常触发及自定义异常类解析
2019/08/06 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
班主任个人工作反思
2014/04/28 职场文书
产品质量保证书
2014/04/29 职场文书
房展策划方案
2014/06/07 职场文书
服务明星事迹材料
2014/12/29 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书