亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

jQuery實現拖動布局并將排序結果保存到數據庫

系統 2507 0

最近的項目中涉及到了用戶個性化定制首頁的需求,用戶要求可以隨意拖動首頁模塊的位置,來實現個性化的布局。本文講解如何使用 jquery 實現拖動布局并將拖動后的布局位置保存到數據庫。

jQuery實現拖動布局并將排序結果保存到數據庫

?

?

?

?

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

本例實現的效果:

  • 通過拖動隨意布局頁面模塊。
  • 記錄拖動后模塊的位置,并記錄到數據庫中。
  • 頁面永久性布局,用任意瀏覽器在任意時候打開,頁面布局不變。(除非用戶再次更改模塊的排序,跟cookie沒有關系)。

原理

采用 jquery ui sorttable 拖動排序插件實現拖動效果。

將拖動后的模塊的位置通過ajax傳給服務端PHP程序。

PHP程序處理位置信息后,更新數據庫中相應的字段內容。

?

     
<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.jsp", //服務端處理程序 
                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和后臺程序交互了。

首先別忘了加載jquery庫和jquery ui的sortable拖動排序插件。

?

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

?

?

?

?

?

jQuery實現拖動布局并將排序結果保存到數據庫


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 欧美一级h | 久久99热久久精品在线6 | 日韩在线手机看片免费看 | 看一级毛片一区二区三区免费 | 中日韩欧美在线观看 | 性做久久 | 欧美巨大video粗暴 | 在线观看a视频 | 欧美精品在线免费观看 | 日韩欧美高清在线观看 | 爱操tv| 神马老子不卡视频在线 | 香蕉视频精品 | 9久re在线观看视频精品 | 欧美xxxxx毛片| 成 人 黄 色视频免费播放 | 亚洲九九爱 | 日韩国产综合 | 国产日韩视频 | 国产午夜偷精品偷伦 | 久久青草免费视频 | 久久精品二区 | 日韩精品一区二区三区视频 | 97在线资源 | 国产理论最新国产精品视频 | 日韩精品一 | 日本中文在线播放 | 狠狠干夜夜骑 | 欧美一级毛片不卡免费观看 | 在线免费国产视频 | 亚洲成aⅴ人片在线观 | 日本精品久久久久中文字幕2 | 99这里只有精品视频 | 免费视频性 | 日韩精品成人 | 色黄啪啪网18以下免费进 | 野外一级毛片黑人 | 色综合小说天天综合网 | 天天舔天天操 | 精品日韩在线视频一区二区三区 | 亚洲欧美精品一中文字幕 |