jQuery拖曳佈局其結果儲存到資料庫

jQuery拖曳佈局其結果儲存到資料庫_jquery

WBOY

發布： 2016-05-16 15:37:11

原創

1534 人瀏覽過

最近的專案中涉及了用戶個性化定制首頁的需求，用戶要求可以隨意拖動首頁模組的位置，來實現個性化的佈局。本文說明如何使用和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="<&#63;php echo $sort;&#63;>" /> 
 <&#63;php 
   for($i=0;$i<$len;$i++){ 
 &#63;> 
 <div class="modules" title="<&#63;php echo $sort_arr[$i]; &#63;>"> 
   <h3 class="m_title">Module:<&#63;php echo $sort_arr[$i]; &#63;></h3> 
   <p><&#63;php echo $sort_arr[$i]; &#63;></p> 
 </div> 
 <&#63;php } &#63;> 
</div>

登入後複製

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

以上就是jQuery實作拖曳版面配置並將排序結果儲存到資料庫的實作過程，希望對大家的學習有所幫助。