全国统一24小时服务热线:400-0000-889400-0000-889  / 13999887799

技术娱乐平台

当前位置:主页 > 技术娱乐平台 >

拖动布局之保存布局页面cookies篇

发布时间:2018-09-14 09:52 作者:admin 来源: 点击: 字号:

我实现的方法是记录每列拥有的拖动对象,这样在初始或刷新的时候读取这列有哪些拖动对象,直接把拖动对象通过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(){ thi****pires = 0 ; //有效时间,以分钟为单位 this.path = ""; //设置访问路径 this.domain = ""; //设置访问主机 this.secure = false; //设置安全性 this.setCookie = function(name,value){ var str = name+"="+escape(value); if (thi****pires>0){ //如果设置了过期时间 var date=new Date(); var ms=thi****pires * 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,有时好像不行,等有时间再研究下)!!

本文源自: 环亚娱乐游戏_环亚娱乐注册_环亚娱乐登录_腾讯娱乐

相关文章Related Articles

如果您觉得本站还不错,就请分享给身边的好友吧


分享成功还有机会获得精美礼品哦