Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  php  >  正文 关于PHP jQuery-ui拖动浮动层排序并保存到数据库实例

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

发布时间:2020-10-02   编辑:www.jquerycn.cn
jquery中文网为您提供关于PHP jQuery-ui拖动浮动层排序并保存到数据库实例等资源,欢迎您收藏本站,我们将为您提供最新的关于PHP jQuery-ui拖动浮动层排序并保存到数据库实例资源
PHP jquery-ui实现的拖动浮动层排序布局并将拖动后的浮动层位置排序结果保存到数据库实例。

65908cc6b9be00de4a41a0eb494560a.png

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

<script type="text/javascript" src="jquery.js"></script>   <script type='text/javascript' src='js/jquery-ui.min.js'></script> <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>

页面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("<img src='images/load.gif' /> 正在更新");                  },                  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拖动浮动层排序并保存到数据库实例的详细内容,更多请关注jQuery中文网其它相关文章!

  • 本文转载于:cnblogs,如有侵犯,请联系jquerycn@qq.com删除
  • 您可能感兴趣的文章:
    jquery sortable的拖动方法示例详解
    jQuery实现可拖动的浮动层完整代码
    jQuery UI 实例 – 拖动(Draggable)
    jquery对元素拖动排序示例
    PostgreSQL从菜鸟到专家系列教程(5)什么是数据库管理系统
    jQuery UI API – 可排序小部件(Sortable Widget)
    jQuery UI 实例 – 排序(Sortable)
    MongoDB 排序
    jquery.ui.draggable中文文档(原文翻译)
    Bootstrap UI 编辑器

    [关闭]