关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例

首先引入jQuery库和jquery-ui.min.js,接着放置一个拖动时的加载图片，和从数据库读取出来的多个模块拖动层.modules，及#orderlist用于记录模块的排序值 。

  

  
  
  
     
   
  
    
Module: 
     
  
    
 
     
  
   
  
     
   
  

页面js:

$(function() { 
    $(".m_title").bind(&＃39;mouseover&＃39;, 
    function() { 
        $(this).css("cursor", "move") 
    }); 
 
    var $show = $("#loader"); //进度条 
    var $orderlist = $("#orderlist"); 
    var $list = $("#module_list"); 
 
    $list.sortable({ 
        opacity: 0.6, 
        revert: true, 
        cursor: &＃39;move&＃39;, 
        handle: &＃39;.m_title&＃39;, 
        update: function() { 
            var new_order = []; 
            $list.children(".modules").each(function() { 
                new_order.push(this.title); 
            }); 
            var newid = new_order.join(&＃39;,&＃39;); 
            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) { 
                    $show.html(""); 
                } 
            }); 
        } 
    }); 
});

拖动后保存到数据库，ajax.php中的代码：

$order = $_POST[&＃39;order&＃39;]; 
$itemid = trim($_POST[&＃39;id&＃39;]); 
if (!empty($itemid)) { 
    if ($order != $itemid) { 
        $query = mysql_query("update sortlist set sort=&＃39;$itemid&＃39; where id=1"); 
        if ($query) { 
            echo $itemid; 
        } else { 
            echo "none"; 
        } 
    } 
}