源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 3557|回复: 0

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

[复制链接]

3095

主题

3493

帖子

13万

金币

超级版主

Rank: 8Rank: 8

积分
266463
发表于 2023-3-8 12:51:49 | 显示全部楼层 |阅读模式

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



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

  1. <script type="text/javascript" src="jquery.js"></script>  

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

  3. <div id="loader"></div>  

  4. <div id="module_list">  

  5. <input type="hidden" id="orderlist" value="<?php echo $sort; ?>" />  

  6.    <!--?php

  7.                 for ($i = 0; $i < $len; $i++) {

  8.                     ?-->  

  9.    <div class="modules" title="<?php echo $sort_arr[$i]; ?>">  

  10.     <h3 class="m_title">Module:

  11.      <!--?php echo $sort_arr[$i]; ?--></h3>  

  12.     <p>

  13.      <!--?php echo $sort_arr[$i]; ?--></p>  

  14.    </div>  

  15.    <!--?php } ?-->  

  16.    <div class="cl"></div>  

  17. </div>
复制代码


页面js:

  1. $(function() {

  2.     $(".m_title").bind('mouseover',

  3.     function() {

  4.         $(this).css("cursor", "move")

  5.     });

  6.   

  7.     var $show = $("#loader"); //进度条

  8.     var $orderlist = $("#orderlist");

  9.     var $list = $("#module_list");

  10.   

  11.     $list.sortable({

  12.         opacity: 0.6,

  13.         revert: true,

  14.         cursor: 'move',

  15.         handle: '.m_title',

  16.         update: function() {

  17.             var new_order = [];

  18.             $list.children(".modules").each(function() {

  19.                 new_order.push(this.title);

  20.             });

  21.             var newid = new_order.join(',');

  22.             var oldid = $orderlist.val();

  23.             $.ajax({

  24.                 type: "post",

  25.                 url: "update.php",

  26.                 data: {

  27.                     id: newid,

  28.                     order: oldid

  29.                 },

  30.                 //id:新的排列对应的ID,order:原排列顺序

  31.                 beforeSend: function() {

  32.                     $show.html("<img src='images/load.gif' /> 正在更新");

  33.                 },

  34.                 success: function(msg) {

  35.                     $show.html("");

  36.                 }

  37.             });

  38.         }

  39.     });

  40. });
复制代码


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

  1. $order = $_POST['order'];

  2. $itemid = trim($_POST['id']);

  3. if (!empty($itemid)) {

  4.     if ($order != $itemid) {

  5.         $query = mysql_query("update sortlist set sort='$itemid' where id=1");

  6.         if ($query) {

  7.             echo $itemid;

  8.         } else {

  9.             echo "none";

  10.         }

  11.     }

  12. }
复制代码


您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-4-14 03:47 , Processed in 0.041342 second(s), 16 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问:IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明