zoukankan      html  css  js  c++  java
  • PHP+jQuery-ui拖动浮动层排序并保存到数据库实例

    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 }


    本文转自:https://www.sucaihuo.com/php/69.html 转载请注明出处!

  • 相关阅读:
    一本通1331后缀表达式的值
    一本通1198 逆波兰表达式
    一本通1311 求逆序对(归并排序应用)
    快速排序
    一本通1310 车厢重组(冒泡排序,类似逆序对)
    一本通1186 出现次数超过一半的数(类似桶排序)
    一本通1216 红与黑 (代码没有参考任何博客,完全是自己写的,我搜索出山了!!!)
    一本通1222 放苹果
    一本通 1212 LETTERS
    一本通1215 迷宫
  • 原文地址:https://www.cnblogs.com/zglevk/p/12496457.html
Copyright © 2011-2022 走看看