关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例

洪七公

通过PHP+jQuery-ui实现的拖动浮动层排序布局并将拖动后的浮动层位置排序结果保存到数据库实例。

首先引入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 (!empty($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. }

复制代码