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

51CTO推薦專題：jQuery從入門到精通   jQuery給力插件大閱兵

本例實現的效果：

通過拖動隨意布局頁面模塊。

記錄拖動后模塊的位置，并記錄到數據庫中。

頁面***性布局，用任意瀏覽器在任意時候打開，頁面布局不變。(除非用戶再次更改模塊的排序，跟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>  

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

原文鏈接：http://www.helloweba.com/view-blog-72.html

【編輯推薦】

1. 分享7個用jQuery重寫的經典在線小游戲
2. jQuery的.bind()、.live()和.delegate()之間區別
3. 分享10個超炫的jQuery網站
4. HTML 5聯手jQuery實現超酷圖像灰度漸變效果
5. jQuery異步調用頁面后臺實例分析