jQuery拖動布局其結果儲存到資料庫，jquery拖動

jQuery拖動布局其結果儲存到資料庫，jquery拖動

最近的項目中涉及到了使用者個人化定製首頁的需求，使用者要求可以隨意拖動首頁模組的位置，來實現個人化的布局。本文講解如何使用和PHP實現拖動布局並將拖動後的布局位置儲存到資料庫。

很多網站的拖動布局的例子都是採用瀏覽器的COOKIE來記錄使用者拖動模組的位置，也就是說拖動後各模組的排序位置資訊是記錄在用戶端的cookie裡的。當使用者清空用戶端的cookie或瀏覽器的cookie到期後，再次訪問頁面時，發現布局又還原成最初的狀態。這種cookie記錄的方式使用簡單，但不適合像個人中心、管理系統首頁的要求。
本例實現的效果：
通過拖動隨意布局頁面模組。
記錄拖動後模組的位置，並記錄到資料庫中。
頁面永久性布局，用任意瀏覽器在任意時候開啟，頁面配置不變。（除非使用者再次更改模組的排序，跟cookie沒有關係）。
原理
採用的拖動排序外掛程式實現拖動效果。
將拖動後的模組的位置通過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外掛程式提供了很多方法和參數配置，詳情請查看
拖動完成要執行一個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 (!emptyempty ($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> 

誠然，真正的拖動排序結果的儲存都跟每個使用者資訊相關聯，所以資料庫的結構設計方面大家可以自行解決，盡情發揮吧。

以上就是jQuery實現拖動布局並將排序結果儲存到資料庫的實現過程，希望對大家的學習有所協助。