拖动布局之保存布局页面

拖动后怎么把布局结果保存呢？？我开始考虑是记录每个拖动对象的的坐标，可做起来我感觉好麻烦，所以就没有采用这种方法，我实现的方法是记录每列拥有的拖动对象，这样在初始或刷新的时候读取这列有哪些拖动对象，直接把拖动对象通过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.οnlοad=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,有时好像不行，等有时间再研究下）！！

拖动布局之保存布局页面相关推荐

C# 创建一个Panel并可以通过鼠标拖动并可以拉动改变大小（可生成多个Panel并保存布局到数据库中）
C# 创建一个Panel并可以通过鼠标拖动并可以拉动改变大小(可生成多个Panel并保存布局到数据库中) 一个用于绘制视频布局的控件,可在背景Panel上生成新的Panel并可以拖动改变位置以及调整大 ...
E3【数据可视化】【组件】基于Python+Flask+Echarts+HTML5拖放(DragDrop)实现的可拖放布局并自动保存布局的动态饼图
目录一. 效果展示二. 实现思路所需知识点三. 系统架构四. 关键代码 1. 页面div布局 2. 布局拖放 drag drop 处理 3. 布局保存 4. Python Flask web ...
页面布局让footer居页面底部_网站各页面该如何布局关键词优化提升排名？
在网站优化中,最值得关注的一个事情就是关键词的布局,因为关键词的布局直接影响着网站的排名.那么怎样布局关键词才能提高页面和关键词的相关性,并提高网站排名呢?下面一起来看看. 一.利用HTML标签布局关 ...
前端开发工程师 - 04.页面架构 - CSS Reset 布局解决方案响应式页面优化规范与模块化...
04.页面架构第1章--CSS Reset 第2章--布局解决方案居中布局课堂交流区水平列表的底部对齐如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
大家一起来博皮——2：液态布局和固态布局，页面框架篇
大家一起来博皮虽然博客园的皮肤很多,而且很漂亮.但是那些自己想更"个性化"自己博客皮肤的朋友,对博客园的皮肤模板还是颇多不满,认为皮肤的结构过于混乱,css样式难以掌控.针对这种 ...
安卓App的启动过程、安卓布局分类及布局和页面的关系
Android App 启动流程: 当你想要启动一个app时,首先得点击该app桌面图标.那点击图标时到底发生了什么呢?先看个理论知识 .Launcher: launcher其实就是一个app,从功能 ...
python 动态调整控件大小_python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例...
PyQt5动态(可拖动控件大小)布局控件QSplitter简介 PyQt还提供了特殊的布局管理器QSplitter.它可以动态地拖动子控件之间的边界,算是一个动态的布局管理器,QSplitter允许用 ...
android 模仿微信布局,【Android初学者】框架布局：仿微信页面制作
学习Android有一段时间了,跟大家分享一下经验吧! 如果有错误的地方,有更好的方法,麻烦大家留言指导! 工具:studio2.2,虚拟机版本:4.3,API 18(感觉比5.1的稳定啊!) 例子是 ...
pyqt5中控件缩放功能_python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例...
PyQt5动态(可拖动控件大小)布局控件QSplitter简介 PyQt还提供了特殊的布局管理器QSplitter.它可以动态地拖动子控件之间的边界,算是一个动态的布局管理器,QSplitter允许用 ...

拖动布局之保存布局页面

拖动布局之保存布局页面相关推荐

最新文章

热门文章