日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

DIV#loader用于顯示提示信息，如loading...，#orderlist是一個隱藏域，用于記錄模塊的排序值?！?..”表示循環(huán)了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(" 正在更新");   
  
  
  
  
                },   
  
  
  
  
                success: function(msg) {   
  
  
  
  
                     //alert(msg);   
  
  
  
  
                     $show.html("");   
  
  
  
  
                }   
  
  
  
  
             });   
  
  
  
  
        }   
  
  
  
  
    });   
  
  
  
  
});  
 
 
 
 

拖動排序的動作都寫在$list.sortable({...})里面，參數(shù)設置和方法請看代碼的注釋。juery ui的sortable插件提供了很多方法和參數(shù)配置，詳情請查看http://jqueryui.com/demos/sortable

拖動完成要執(zhí)行一個update方法，該方法需要將拖動后排序的位置通過ajax提交給后臺處理。

 
 
 
 

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

說明：循環(huán)每個模塊.modules，獲取拖動排序后每個模塊的屬性title值，將值通過逗號連接成一個字符串。原來的未拖動之前的排序值從隱藏域orderlist中獲取。

獲取排序值后，就是通過ajax和后臺程序交互了。

PHP

update.php接收前端ajax通過POST提交過來的兩個參數(shù)，及排序前的值和排序后的值，將這連個值進行對比，如果不相等，則更新數(shù)據(jù)庫中的排序字段，完成了拖動排序后的及時保存。

 
 
 
 

  
  
  
  
include_once("connect.php");//連接數(shù)據(jù)庫   
  
  
  
  
$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通過連接數(shù)據(jù)庫讀取模塊的排序信息，并將各模塊顯示出來。

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

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

 
 
 
 

  
  
  
  
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)顯示各模塊。