拖动布局之保存布局页面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 面向对象 function类
May 13 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
js实现可控制左右方向的无缝滚动效果
May 29 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 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
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
laravel中短信发送验证码的实现方法
2018/04/25 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
React组件对子组件children进行加强的方法
2019/06/23 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python基于有道实现英汉字典功能
2015/07/25 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
Python输出指定字符串的方法
2020/02/06 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
市场营销计划书
2015/01/17 职场文书
董事长年会致辞
2015/07/29 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
Pandas 数据编码的十种方法
2022/04/20 Python
OpenFeign实现远程调用
2022/08/14 Java/Android