jQuery拖動布局實現排序結果同步資料庫

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

BKJIA推薦專題：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