您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

bubuko 2022/1/25 20:05:29 Jquery 字数 9393 阅读 587 来源 http://www.bubuko.com/infolist-5-1.html

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 转载请注明出处!

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

原文:https://www.cnblogs.com/zglevk/p/12496457.html


如果您也喜欢它,动动您的小指点个赞吧

除非注明,文章均由 laddyq.com 整理发布,欢迎转载。

转载请注明:
链接:http://laddyq.com
来源:laddyq.com
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


联系我
置顶