最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 沐浴春风 2015-04-23 08:03浏览(2063)

本文讲解如何使用jquery+UI及PHP实现拖动浮动层,并将拖动后的浮动层位置保存到数据库。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

PHP+jQueryui实现拖动布局并将排序结果保存到数据库
分类:悬浮层/弹出层 > 拖动 难易:中级
查看演示 下载资源 下载积分: 30 积分

首先我们引入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"; } } }

声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/69.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    05-28 20:38
    ngu137
    不错的功能效果啊
  • 头像 沙发
    03-23 13:09
    hezhan
    不错可以研究一下
1 2