PHP+jQueryui实现拖动布局并将排序结果保存到数据库【原创

来源:https://www.sucaihuo.com/php/69.html 2015-04-23 08:03浏览(4679) 收藏

本文讲解如何使用jquery+UI及PHP实现拖动浮动层,并将拖动后的浮动层位置保存到数据库。
PHP+jQueryui实现拖动布局并将排序结果保存到数据库
分类:悬浮层/弹出层 > 拖动 难易:中级
下载资源 下载积分: 50 积分
有问题,点击联系客服

首先我们引入jQuery库和jquery-ui.min.js

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

接着我们放置一个拖动时的加载图片,和从数据库读取出来的多个模块拖动层.modules,及#orderlist用于记录模块的排序值。

<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 class="cl"></div> 
</div>

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("<img src='images/load.gif' /> 正在更新");
                },
                success: function(msg) {
                    $show.html("");
                }
            });
        }
    });
});

ajax.php

拖动后保存到数据库,我们看下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";
        }
    }
}
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/php/69.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2