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

首先引入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视频教程：https://www.php.cn/course/list/29/type/2.html

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！