首先引入jQuery库和jquery-ui.min.js,接着放置一个拖动时的加载图片，和从数据库读取出来的多个模块拖动层.modules，及#orderlist用于记录模块的排序值 。

1. <script type="text/javascript" src="jquery.js"></script>   
2.  
3. <script type='text/javascript' src='js/jquery-ui.min.js'></script> 
4.  
5. <div id="loader"></div>   
6.  
7. <div id="module_list">   
8.  
9. <input type="hidden" id="orderlist" value="<?php echo $sort; ?>" />   
10.  
11.    <!--?php  
12.  
13.                 for ($i = 0; $i < $len; $i++) {  
14.  
15.                     ?-->   
16.  
17.    <div class="modules" title="<?php echo $sort_arr[$i]; ?>">   
18.  
19.     <h3 class="m_title">Module:  
20.  
21.      <!--?php echo $sort_arr[$i]; ?--></h3>   
22.  
23.     <p>  
24.  
25.      <!--?php echo $sort_arr[$i]; ?--></p>   
26.  
27.    </div>   
28.  
29.    <!--?php } ?-->   
30.  
31.    <div class="cl"></div>   
32.  
33. </div> 

页面js:

1. $(function() {  
2.  
3.     $(".m_title").bind('mouseover',  
4.  
5.     function() {  
6.  
7.         $(this).css("cursor", "move")  
8.  
9.     });  
10.  
11.    
12.  
13.     var $show = $("#loader"); //进度条  
14.  
15.     var $orderlist = $("#orderlist");  
16.  
17.     var $list = $("#module_list");  
18.  
19.    
20.  
21.     $list.sortable({  
22.  
23.         opacity: 0.6,  
24.  
25.         revert: true,  
26.  
27.         cursor: 'move',  
28.  
29.         handle: '.m_title',  
30.  
31.         update: function() {  
32.  
33.             var new_order = [];  
34.  
35.             $list.children(".modules").each(function() {  
36.  
37.                 new_order.push(this.title);  
38.  
39.             });  
40.  
41.             var newid = new_order.join(',');  
42.  
43.             var oldid = $orderlist.val();  
44.  
45.             $.ajax({  
46.  
47.                 type: "post",  
48.  
49.                 url: "update.php",  
50.  
51.                 data: {  
52.  
53.                     id: newid,  
54.  
55.                     order: oldid  
56.  
57.                 },  
58.  
59.                 //id:新的排列对应的ID,order：原排列顺序  
60.  
61.                 beforeSend: function() {  
62.  
63.                     $show.html("<img src='images/load.gif' /> 正在更新");  
64.  
65.                 },  
66.  
67.                 success: function(msg) {  
68.  
69.                     $show.html("");  
70.  
71.                 }  
72.  
73.             });  
74.  
75.         }  
76.  
77.     });  
78.  
79. }); 

拖动后保存到数据库，ajax.php中的代码：

1. $order = $_POST['order'];  
2.  
3. $itemid = trim($_POST['id']);  
4.  
5. if (!emptyempty($itemid)) {  
6.  
7.     if ($order != $itemid) {  
8.  
9.         $query = mysql_query("update sortlist set sort='$itemid' where id=1");  
10.  
11.         if ($query) {  
12.  
13.             echo $itemid;  
14.  
15.         } else {  
16.  
17.             echo "none";  
18.  
19.         }  
20.  
21.     }  
22.  
23. }

Tags: PHP+jQuery-ui

分享到：