拖动布局之保存布局页面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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Jun 05 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
详解tween.js的使用教程
Sep 14 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 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生成图片缩略图功能示例
2017/02/22 PHP
php session的应用详细介绍
2017/03/22 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
Python ZipFile模块详解
2013/11/01 Python
Python实现发送email的几种常用方法
2014/08/18 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
3分钟学会一个Python小技巧
2018/11/23 Python
python requests.post带head和body的实例
2019/01/02 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
SportsDirect.com新加坡:英国第一体育零售商
2019/03/30 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
顶撞老师检讨书
2014/02/07 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
车辆委托书范本
2014/10/05 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
工程部部长岗位职责
2015/02/12 职场文书
辞职书格式样本
2015/02/26 职场文书
立案决定书范文
2015/06/24 职场文书