本来对Javascript是一点都不懂的,不过看到Jquery有那么多诱人的功能,特别是Jquery UI提供的功能是十分的强大,加上各种各样的插件,Jquery基本上是无所不能。本来一直想做一个类似与iGoogle的拖动,原来不知道如何下手。昨天发现Jquery UI中的Sortable居然已经有这种功能了,枉费我还在那瞎想。这里主要是用它其中的portlets,可以实现div在不同列的拖动。
为了比较简单的实现这个功能,我把Jquery UI的整个包下载了下来,使用其中的对应html进行修改。
在这里,任意一个组件都是可以拖动的。而且点击“-”号可以折叠这个组件,十分方便。当然它的定制功能也很强大,比如不想让某个组件移动,某个组件只能在某一列移动也都是可以设置的。
我没有去看具体怎么实现。现在的关键是要把移动完的位置保存到数据库里,而且又能从数据库中把对应的东西调出来。搜索出来网上很多都是保存到cookies里,而且居然很多代码转来转去的,转的都错了,都不能用,只好在他们的基础上继续摸索了。
首先要把这些div层都写上id,来区别出他们,我用他们原来的名字作为id了。而且把三列的id分别命名为c1,c2,c3。
如何得出这些div的位置呢?网上有些是说可以用serialize函数。不过我用serialize函数返回的居然是空值?资料上说,要把这些东西的id写成“set_number”的形式才可以。比如写成ineyes_1,ineyes_2,ineyes_3……我觉得这种命名比较适合li的命名,对这种div跨列拖动似乎不太好。
再次受挫只能另辟蹊径。终于我又在网上找到另外一种方法。这里是把东西保存到cookie中,不过它保存id的方法非常好用,我就在他的基础上继续修改了。在这里感谢原作者。
原来的实例中有下面这一段javascript代码,略加修改就可以
- $( ".column" ).sortable({
- connectWith: ".column",
- stop:saveLayout //这一行是新加的
- });
添加的那一行的意思就是在拖拽结束之后执行saveLayout函数。然后写saveLayout函数如下:
- function saveLayout() {
- var list = "";
- $.each($(".column"), function(m) {
- list += $(this).attr('id') + ":";
- $.each($(this).children(".portlet"), function(d) {
- list += $(this).attr('id') + ",";
- })
- list += "|";
- }) //对其进行处理,把每一列有的div的id分别储存起来。
- $.cookie("list", list); //储存到cookie中。
- $.ajax({ //利用ajax进行储存到数据库的操作。
- type: "post",
- url: "useroption_update.php",
- data: { id: "1", optionname:"modulesort" , sortlist: list}, //id:要储存的用户id,这里分用户进行储存。
- beforeSend: function() {
- $show.html("<img src='load.gif' /> Updating");
- },
- success: function(msg) {
- $show.html("");
- }
- });
- }
有了以上脚本之后,一拖动完成,就会自动将现在的排列状态post到useroption_update.php中让其处理。在ajax中我使用了一些$show.html(‘内容’)的方法。不过在我这里好像不能用($Show是一个div)。
接下来要编写useroption_update.php对传来的数据进行处理,应该比较简单。
- <?php
- include_once("conn.php"); //数据库连接文件。
- $sortlist = $_POST['sortlist'];
- $userid = $_POST['id'];
- $optionname=$_POST['optionname'];
- if (!empty ($userid)) {
- $query = mysql_query("update user_option set value='$sortlist' where user_id='$userid' and option_name='$optionname'");
- if ($query) {
- echo $userid;
- } else {
- echo "none";
- }
- }
- ?>
能把顺序存入,也要能读出才对啊。我这里把数据库读出的东西存到cookie中,避免每次刷新页面就去查询数据库,增加无谓的负担。也就是说,用户登录的时候将配置信息都拿出来放到cookie中,然后可以设置一个强制更新的按钮来查询数据库更新cookie。在页面中使用cookie来排列div顺序。这样就万无一失了。
这里写的load.php非常简单,就是将对应的数据拿出来放到cookie中。如果要应用可以在页面里写个ajax来调用。
- <?php
- include_once("conn.php");
- $userid = '1';
- $optionname='modulesort';
- $query = mysql_query("select value from user_option where user_id='$userid' and option_name='$optionname'");
- $result=mysql_fetch_row($query);
- echo $result[0];
- setcookie("list",$result[0])
- ?>
访问完这个页面之后,东西就自动从数据库中调出来存入到cookie中,再访问原页面就有数据库中的排序了