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

PHP+jQuery-ui实现的拖动浮动层排序布局并将拖动后的浮动层位置排序结果保存到数据库实例。

成都创新互联公司服务项目包括巴南网站建设、巴南网站制作、巴南网页制作以及巴南网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，巴南网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到巴南省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

  

  
  
  
     
   
  
    
Module: 
     
  
    
 
     
  
   
  
     
   
  

页面js:

$(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) { 
                    $show.html(""); 
                } 
            }); 
        } 
    }); 
});

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

$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"; 
        } 
    } 
}

以上就是关于PHP+jQuery-ui拖动浮动层排序并保存到数据库实例的详细内容，更多请关注创新互联其它相关文章！