快捷導(dǎo)航

jQuery拖動(dòng)布局其結(jié)果保存到數(shù)據(jù)庫(kù)

更新時(shí)間：2015年10月09日 10:02:38 投稿：lijiao

這篇文章介紹了jQuery實(shí)現(xiàn)拖動(dòng)布局并將排序結(jié)果保存到數(shù)據(jù)庫(kù)的實(shí)現(xiàn)方法，感興趣的朋友可以參考一下

最近的項(xiàng)目中涉及到了用戶個(gè)性化定制首頁(yè)的需求，用戶要求可以隨意拖動(dòng)首頁(yè)模塊的位置，來實(shí)現(xiàn)個(gè)性化的布局。本文講解如何使用和PHP實(shí)現(xiàn)拖動(dòng)布局并將拖動(dòng)后的布局位置保存到數(shù)據(jù)庫(kù)。

很多網(wǎng)站的拖動(dòng)布局的例子都是采用瀏覽器的COOKIE來記錄用戶拖動(dòng)模塊的位置，也就是說拖動(dòng)后各模塊的排序位置信息是記錄在客戶端的cookie里的。當(dāng)用戶清空客戶端的cookie或?yàn)g覽器的cookie過期后，再次訪問頁(yè)面時(shí)，發(fā)現(xiàn)布局又還原成最初的狀態(tài)。這種cookie記錄的方式使用簡(jiǎn)單，但不適合像個(gè)人中心、管理系統(tǒng)主頁(yè)的要求。
本例實(shí)現(xiàn)的效果：
通過拖動(dòng)隨意布局頁(yè)面模塊。
記錄拖動(dòng)后模塊的位置，并記錄到數(shù)據(jù)庫(kù)中。
頁(yè)面永久性布局，用任意瀏覽器在任意時(shí)候打開，頁(yè)面布局不變。（除非用戶再次更改模塊的排序，跟cookie沒有關(guān)系）。
原理
采用的拖動(dòng)排序插件實(shí)現(xiàn)拖動(dòng)效果。
將拖動(dòng)后的模塊的位置通過ajax傳給服務(wù)端PHP程序。
PHP程序處理位置信息后，更新數(shù)據(jù)庫(kù)中相應(yīng)的字段內(nèi)容。
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是一個(gè)隱藏域，用于記錄模塊的排序值?！?..”表示循環(huán)了n個(gè)DIV.modules，具體生成的代碼在后面會(huì)講到。
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}

簡(jiǎn)單，關(guān)鍵是要給.modules一個(gè)想左浮動(dòng)的樣式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, //設(shè)置拖動(dòng)時(shí)候的透明度 
    revert: true, //緩沖效果 
    cursor: 'move', //拖動(dòng)的時(shí)候鼠標(biāo)樣式 
    handle: '.m_title', //可以拖動(dòng)的部位，模塊的標(biāo)題部分 
    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", //服務(wù)端處理程序 
        data: { id: newid, order: oldid },  //id:新的排列對(duì)應(yīng)的ID,order：原排列順序 
        beforeSend: function() { 
           $show.html("<img src='load.gif' /> 正在更新"); 
        }, 
        success: function(msg) { 
           //alert(msg); 
           $show.html(""); 
        } 
       }); 
    } 
  }); 
});

拖動(dòng)排序的動(dòng)作都寫在$list.sortable({...})里面，參數(shù)設(shè)置和方法請(qǐng)看代碼的注釋。juery ui的sortable插件提供了很多方法和參數(shù)配置，詳情請(qǐng)查看
拖動(dòng)完成要執(zhí)行一個(gè)update方法，該方法需要將拖動(dòng)后排序的位置通過ajax提交給后臺(tái)處理。

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

說明：循環(huán)每個(gè)模塊.modules，獲取拖動(dòng)排序后每個(gè)模塊的屬性title值，將值通過逗號(hào)連接成一個(gè)字符串。原來的未拖動(dòng)之前的排序值從隱藏域orderlist中獲取。
獲取排序值后，就是通過ajax和后臺(tái)程序交互了。
PHP
update.php接收前端ajax通過POST提交過來的兩個(gè)參數(shù)，及排序前的值和排序后的值，將這連個(gè)值進(jìn)行對(duì)比，如果不相等，則更新數(shù)據(jù)庫(kù)中的排序字段，完成了拖動(dòng)排序后的及時(shí)保存。

include_once("connect.php");//連接數(shù)據(jù)庫(kù) 
$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"; 
    } 
  } 
}

首頁(yè)index.php
再回到展示布局的首頁(yè)index.php。index.php通過連接數(shù)據(jù)庫(kù)讀取模塊的排序信息，并將各模塊顯示出來。
首先別忘了加載jquery庫(kù)和jquery ui的sortable拖動(dòng)排序插件。

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

讀取數(shù)據(jù)庫(kù)的排序字段值。

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);

循環(huán)顯示各模塊。

<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>

誠(chéng)然，真正的拖動(dòng)排序結(jié)果的保存都跟每個(gè)用戶信息相關(guān)聯(lián)，所以數(shù)據(jù)庫(kù)的結(jié)構(gòu)設(shè)計(jì)方面大家可以自行解決，盡情發(fā)揮吧。

以上就是jQuery實(shí)現(xiàn)拖動(dòng)布局并將排序結(jié)果保存到數(shù)據(jù)庫(kù)的實(shí)現(xiàn)過程，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: