简易而又灵活的Javascript拖拽框架（五）

======================================================
注：本文源代码点此下载
======================================================

简易而又灵活的javascript拖拽框架(五)

一、开篇

在写了前几篇拖拽过后,有不少朋友留言说如果将拖拽结果持久化将会更好。在了解了javascript对cookie的操作还有一点json知识过后,修改了上一篇文章的代码,可以将结果保存在客户端cookie,每次打开页面就可以载入上次拖拽的数据,得到上次的拖拽布局。

查看示例

二、原理

首先添加了两个方法:setcookie和getcookie,分别用来添加/修改cookie和读取cookie,这些教程太多了,就不多说了。

然后来说说打开网页到关闭网页的整个过程:

1、打开网页的时候,会通过getcookie去读取名为“xdrag”的cookie,如果用户是第一次打开这个页面(或者是禁用、手动删除了cookie,总之客户端没有对应的cookie的时候),则会有一个默认的配置;

2、网页的html元素的结构也有所变化,以前是直接把拖拽的模块直接放置在对应的页对应的列,现在是统一放在tempcontainer这个div中,通过读取的配置来将tempcontianer里面的模块“分发”到配置指定的页制定的列;

3、注册window.onbeforeunload事件,在页面unload之前保存配置到cookie。保存的方法就是遍历每一页的每一列的每一个模块,将每个模块的id记录下来,根据页面和列和id来构造一个json字符串(因为cookie保存的值就是字符串),这样读取的时候只需要用eval即可得到保存的数据的对象,这是json的优点。

下面是这个json字符串的结构,嵌套了3层array

jsonobj.pages得到pages数组

jsonobj.pages[0]得到page1的列的数组

jsonobj.pages[0][0]得到page1的第一列的所有id的集合

三、代码

下面是几个添加的几个主要的方法:

setcookie和getcookie

function setcookie(sname,svalue,oexpires,spath,sdomain,bsecure){

var scookie = sname + "=" + encodeuricomponent(svalue);

if(oexpires)

scookie += "; expires=" + oexpires.togmtstring();

if(spath)

scookie += "; path=" + spath;

if(sdomain)

scookie += "; domain=" + sdomain;

if(bsecure)

scookie += "; secure";

document.cookie = scookie;

}

function getcookie(sname){

var sre = "(?:; )?" + sname + "=([^;]*);?";

var ore = new regexp(sre);

if(ore.test(document.cookie))

return decodeuricomponent(regexp["$1"]);

else

return null;

}

遍历布局保存到cookie

xdrag.save = function(){//将结果保存到cookie

var jsonstring = new stringbuilder();

jsonstring.append('{"pages":[')

for(var i=0;ixdrag.pages.length;i++){//遍历每一页

jsonstring.append("[");

var page = xdrag.pages[i];

for(var j=0;jpage.childnodes.length;j++){//遍历每一列

var column = page.childnodes[j];

if(column.nodename.tolowercase() != "div")

continue;

jsonstring.append("[");

for(var k=0;kcolumn.childnodes.length;k++){//遍历每一列的module

var module = column.childnodes[k];

if(module.nodename.tolowercase() != "div" || module.style.display == "none")

continue;

jsonstring.append('"' + module.id + '",');

}

jsonstring.append("],");

}

jsonstring.append("],");

}

jsonstring.append(']}');

var jsonstr = jsonstring.tostring();

var cookievalue = jsonstr.replace(/,]/g,"]");

setcookie("xdrag",cookievalue,null,null,null,false);

}

从cookie读取保存的布局

xdrag.readfromcookie = function(){//读取cookie

var value = getcookie("xdrag") || xdrag.defaultlayout;

var obj = eval('(' + value + ')');

return obj;

}

四、示例下载

点此下载示例

标签: javascript, 拖拽, 框架, 拖放, 保存

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2008-10-06 14:04 longway 阅读(3714) 评论(19)编辑 收藏

发表评论

1399565

回复 引用 查看

#1楼2008-10-06 14:34 | justin

帅呆了

回复 引用

#2楼2008-10-06 14:41 | bf419[未注册用户]

额的神,好喜欢哦,收藏先

回复 引用 查看

#3楼2008-10-06 15:22 | ryan gene

很不错啊,支持

回复 引用 查看

#4楼2008-10-06 15:23 | 火无极

跟tom做的一样啊!呵呵

回复 引用 查看

#5楼2008-10-06 19:16 | 飘遥(周振兴)

很不错~

再加上拖到相应的列,宽度自动调整~

回复 引用 查看

#6楼2008-10-06 20:37 | 沛沛

好东西,

回复 引用 查看

#7楼2008-10-06 23:11 | 邱多云

经典的哦。。

回复 引用 查看

#8楼2008-10-07 08:29 | gguowang

很帅哦 谢谢!

回复 引用 查看

#9楼2008-10-07 08:41 | 王国金

很不错啊。谢谢楼主分享!这个功能以前也有实现过,但是效率一直不怎么可以。机子实行时cpu会超高。试试楼主的先!

回复 引用 查看

#10楼2008-10-07 09:22 | 有容乃大

额的神啊,真的很强大,多谢分享。

-----------------------------------------------

.net项目开发工具(v3.0 ):

http://www.cnblogs.com/mrhgw/archive/2008/08/06/1261664.html

http://www.mrhgw.cn

回复 引用 查看

#11楼2008-10-07 15:20 | 豆苗

顶了

回复 引用

#12楼2008-10-07 16:39 | kankana[未注册用户]

如何实现自由布局,比如说column宽度可以随意占几个的宽度

回复 引用

#13楼2008-10-07 19:17 | hite[未注册用户]

不错,顶了

回复 引用 查看

#14楼2008-10-08 12:42 | 菩提树下的杨过

不错,跟wc小兄弟的cdrag有得一拼

我上次利用他的js代码+wcf实现的数据库保存

http://www.cnblogs.com/yjmyzz/archive/2008/09/20/1294753.html

如果楼主再改进一下,比如能修改标题文字,动态增/删模块,设置每个模块的显示记录条数,就完全能取代webpart了

回复 引用

#15楼2008-10-13 10:03 | 潘凯[未注册用户]

我都看呆了

回复 引用 查看

#16楼2008-10-15 10:02 | 小庄

希望楼主能增加拖拽框的最小化,还原,关闭功能!

回复 引用 查看

#17楼2008-10-21 16:55 | peace

无条件支持下

回复 引用 查看

#18楼2008-11-07 21:32 | peach

非常好

回复 引用

#19楼2008-12-12 10:57 | 匿名[未注册用户]

怎么不发个拖动改变表格列宽的示例??

注册用户登录后才能发表评论,请 登录 或 注册,返回博客园首页。

首页博问闪存新闻园子招聘知识库

最新it新闻:

·小米晒余额：支付宝昨日到账1.22亿

·windows 7官方rss动态主题：《昆虫》

·捡到iphone 4s玩自拍 icloud同步酿悲剧

·铁道部购票网站存泄密危险 cdn服务商技术短板是主因

·利用 mimo magictouch 打造另类的平板电脑

» 更多新闻...

最新知识库文章:

·设计师的品牌意识

·如何成为“10倍效率”开发者

·快速排序（quicksort）的javascript实现

·wcf服务端运行时架构体系详解[续篇]

·wcf服务端运行时架构体系详解[下篇]

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/