jQuery實現拖動布局並將排序結果保存到數據庫

最近的項目中涉及到了用戶個性化定制首頁的需求，用戶要求可以隨意拖動首頁模塊的位置，來實現個性化的布局。本文講解如何使用jquery和PHP實現拖動布局並將拖動后的布局位置保存到數據庫。

很多網站的拖動布局的例子都是采用瀏覽器的COOKIE來記錄用戶拖動模塊的位置，也就是說拖動后各模塊的排序位置信息是記錄在客戶端的 cookie里的。當用戶清空客戶端的cookie或瀏覽器的cookie過期后，再次訪問頁面時，發現布局又還原成最初的狀態。這種cookie記錄的方式使用簡單，但不適合像個人中心、管理系統主頁的要求。

本例實現的效果：

通過拖動隨意布局頁面模塊。
記錄拖動后模塊的位置，並記錄到數據庫中。
頁面永久性布局，用任意瀏覽器在任意時候打開，頁面布局不變。（除非用戶再次更改模塊的排序，跟cookie沒有關系）。

原理

采用jquery ui的sorttable拖動排序插件實現拖動效果。

將拖動后的模塊的位置通過ajax傳給服務端PHP程序。

PHP程序處理位置信息后，更新數據庫中相應的字段內容。

XHTML

<div id="loader"></div> 
<div id="module_list"> 
   <input type="hidden" id="orderlist" /> 
   <div class="modules" title="1"> 
      <h3 class="m_title">Module:1</h3> 
      <p>1</p> 
   </div> 
   ... 
</div>

DIV#loader用於顯示提示信息，如loading...，#orderlist是一個隱藏域，用於記錄模塊的排序值。“...”表示循環了n個DIV.modules，具體生成的代碼在后面會講到。

CSS

#module_list{margin-left:4px} 
.modules{float:left; width:200px; height:140px; margin:10px; border:1px solid #acc6e9; 
 background:#e8f5fe} 
.m_title{height:24px; line-height:24px; background:#afc6e9} 
#loader{height:24px; text-align:center}

簡單，關鍵是要給.modules一個想左浮動的樣式float:left。

jQuery

$(function(){ 
    $(".m_title").bind('mouseover',function(){ 
        $(this).css("cursor","move") 
    }); 
     
    var $show = $("#loader");  
    var $orderlist = $("#orderlist"); 
    var $list = $("#module_list"); 
     
    $list.sortable({ 
        opacity: 0.6, //設置拖動時候的透明度 
        revert: true, //緩沖效果 
        cursor: 'move', //拖動的時候鼠標樣式 
        handle: '.m_title',  //可以拖動的部位，模塊的標題部分 
        update: function(){ 
             var new_order = []; 
             $list.children(".modules").each(function() { 
                new_order.push(this.title); 
             }); 
             var newid = new_order.join(','); 
             var oldid = $orderlist.val(); 
             $.ajax({ 
                type: "post", 
                url: "update.php", //服務端處理程序 
                data: { id: newid, order: oldid },   //id:新的排列對應的ID,order：原排列順序 
                beforeSend: function() { 
                     $show.html("<img src='load.gif' /> 正在更新"); 
                }, 
                success: function(msg) { 
                     //alert(msg); 
                     $show.html(""); 
                } 
             }); 
        } 
    }); 
});

拖動排序的動作都寫在$list.sortable({...})里面，參數設置和方法請看代碼的注釋。juery ui的sortable插件提供了很多方法和參數配置，詳情請查看http://jqueryui.com/demos/sortable

拖動完成要執行一個update方法，該方法需要將拖動后排序的位置通過ajax提交給后台處理。

var new_order = []; 
$list.children(".modules").each(function() { 
     new_order.push(this.title); 
}); 
var newid = new_order.join(','); 
var oldid = $orderlist.val();

說明：循環每個模塊.modules，獲取拖動排序后每個模塊的屬性title值，將值通過逗號連接成一個字符串。原來的未拖動之前的排序值從隱藏域orderlist中獲取。

獲取排序值后，就是通過ajax和后台程序交互了。

PHP

update.php接收前端ajax通過POST提交過來的兩個參數，及排序前的值和排序后的值，將這連個值進行對比，如果不相等，則更新數據庫中的排序字段，完成了拖動排序后的及時保存。

include_once("connect.php");//連接數據庫 
$order = $_POST['order']; 
$itemid = trim($_POST['id']); 
if (!empty ($itemid)) { 
    if ($order != $itemid) { 
        $query = mysql_query("update sortlist set sort='$itemid' where id=1"); 
        if ($query) { 
            echo $itemid; 
        } else { 
            echo "none"; 
        } 
    } 
}

首頁index.php

再回到展示布局的首頁index.php。index.php通過連接數據庫讀取模塊的排序信息，並將各模塊顯示出來。

首先別忘了加載jquery庫和jquery ui的sortable拖動排序插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui.min.js"></script>

讀取數據庫的排序字段值。

include_once("connect.php"); 
 
$query=mysql_query("select * from sortlist where id=1"); 
if($rs=mysql_fetch_array($query)){ 
       $sort=$rs['sort']; 
} 
$sort_arr=explode(",",$sort); 
$len=count($sort_arr);

循環顯示各模塊。

<div id="loader"></div> 
<div id="module_list"> 
  <input type="hidden" id="orderlist" value="<?php echo $sort;?>" /> 
  <?php  
     for($i=0;$i<$len;$i++){ 
  ?> 
  <div class="modules" title="<?php echo $sort_arr[$i]; ?>"> 
      <h3 class="m_title">Module:<?php echo $sort_arr[$i]; ?></h3> 
      <p><?php echo $sort_arr[$i]; ?></p> 
  </div> 
  <?php } ?> 
</div>

誠然，真正的拖動排序結果的保存都跟每個用戶信息相關聯，所以數據庫的結構設計方面大家可以自行解決，盡情發揮吧。