用Jquery UI Sortable与数据库实现div拖动（类似iGoogle）

本来对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代码，略加修改就可以

1. $( ".column" ).sortable({
2.     connectWith: ".column",
3.     stop:saveLayout   //这一行是新加的
4. });

添加的那一行的意思就是在拖拽结束之后执行saveLayout函数。然后写saveLayout函数如下：

1. function saveLayout() {
2. var list = "";
3. $.each($(".column"), function(m) {
4.     list += $(this).attr('id') + ":";
5.     $.each($(this).children(".portlet"), function(d) {
6.         list += $(this).attr('id') + ",";
7.     })
8.     list += "|";
9. })                      //对其进行处理，把每一列有的div的id分别储存起来。
10. $.cookie("list", list);   //储存到cookie中。
11.     $.ajax({    //利用ajax进行储存到数据库的操作。
12.         type: "post",
13.         url: "useroption_update.php",
14.         data: { id: "1", optionname:"modulesort" , sortlist: list},   //id:要储存的用户id，这里分用户进行储存。
15.         beforeSend: function() {
16.              $show.html("<img src='load.gif' /> Updating");    
17.         },
18.         success: function(msg) {
19.         $show.html("");
20.             }
21.         });
22. }

有了以上脚本之后，一拖动完成，就会自动将现在的排列状态post到useroption_update.php中让其处理。在ajax中我使用了一些$show.html(‘内容’)的方法。不过在我这里好像不能用（$Show是一个div）。

接下来要编写useroption_update.php对传来的数据进行处理，应该比较简单。

1. <?php
2. include_once("conn.php");   //数据库连接文件。
3. $sortlist = $_POST['sortlist'];
4. $userid = $_POST['id'];
5. $optionname=$_POST['optionname'];
6. if (!empty ($userid)) {
7.         $query = mysql_query("update user_option set value='$sortlist' where user_id='$userid' and option_name='$optionname'");
8.         if ($query) {
9.             echo $userid;
10.         } else {
11.             echo "none";
12.         }
13. }
14. ?>

能把顺序存入，也要能读出才对啊。我这里把数据库读出的东西存到cookie中，避免每次刷新页面就去查询数据库，增加无谓的负担。也就是说，用户登录的时候将配置信息都拿出来放到cookie中，然后可以设置一个强制更新的按钮来查询数据库更新cookie。在页面中使用cookie来排列div顺序。这样就万无一失了。

这里写的load.php非常简单，就是将对应的数据拿出来放到cookie中。如果要应用可以在页面里写个ajax来调用。

1. <?php
2. include_once("conn.php");
3. $userid = '1';
4. $optionname='modulesort';
5. $query = mysql_query("select value from user_option where user_id='$userid' and option_name='$optionname'");
6. $result=mysql_fetch_row($query);
7. echo $result[0];
8. setcookie("list",$result[0])
9. ?>

访问完这个页面之后，东西就自动从数据库中调出来存入到cookie中，再访问原页面就有数据库中的排序了

Demo: http://www.ineyes.org/resource/demo/jqsortable/