首页>>Jquery图片>>php+jquery拖动并更改排序的完整代码(2016-11-21)

php+jquery拖动并更改排序的完整代码

 勾选后拖动可以实时保存更新后的数据

php+jquery拖动并更改排序的完整代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <script type="text/javascript">  
  2.         jQuery(document).ready(function() {  
  3.   
  4.             //保存常用选择器  
  5.             var list = jQuery("#list"); //ul  
  6.             var show = jQuery("#show"); //输出提示  
  7.             var orderlist = jQuery("#orderlist");   //原顺序  
  8.             var check = jQuery("#check");   //是否更新到数据库  
  9.   
  10.             //保存原来的排列顺序  
  11.             var order = [];  
  12.             list.children("li").each(function() {  
  13.                 order.push(this.title); //原排列顺序保存在title，得到后更改title  
  14.                 jQuery(this).attr("title", "你可以拖动进行排序");  
  15.             });  
  16.             orderlist.val(order.join(','));  
  17.   
  18.             //ajax更新  
  19.             var Update = function(itemid, itemorder) {  
  20.                 jQuery.ajax({  
  21.                     type: "post",  
  22.                     url: "update.php",  
  23.                     data: { id: itemid, order: orderlist.val() },   //id:新的排列对应的ID,order：原排列顺序  
  24.                     beforeSend: function() {  
  25.                         show.html("正在更新");  
  26.                     },  
  27.                     success: function(req) {  
  28.                         if (req == "100") {  
  29.                             show.html("更新成功");  
  30.                         }  
  31.                         else if (req == "001") {  
  32.                             show.html("失败，请稍后再试");  
  33.                         }  
  34.                         else {  
  35.                             show.html("参数不全");  
  36.                         }  
  37.                     }  
  38.                 });  
  39.             };  
  40.   
  41.             //调用ajax更新方法  
  42.             var Submit = function(update) {  
  43.                 var order = [];  
  44.                 list.children("li").each(function() {  
  45.                     order.push(this.id);  
  46.                 });  
  47.                 var itemid = order.join(',');  
  48.                 //如果单选框选中，则更新表中排列顺序  
  49.                 if (update) {  
  50.                     Update(itemid);  
  51.                 }  
  52.                 else {  
  53.                     show.html("");  
  54.                 }  
  55.             };  
  56.   
  57.   
  58.             //执行排列操作  
  59.             list.sortable({  
  60.                 opacity: 0.7,  
  61.                 update: function() {  
  62.                     Submit(check.attr("checked"));  
  63.                 }  
  64.             });  
  65.   
  66.         });  
  67.     </script>  
PHP Code
  1. <form id="form1" runat="server">  
  2.   <span id="show"></span>  
  3.   <div> 拖动时同时更新数据库数据：  
  4.     <input type="checkbox" id="check" />  
  5.   </div>  
  6.   <div>  
  7.     <input type="hidden" id="orderlist" />  
  8.     <?php  
  9.         require "../../conn.php";  
  10.         $query = mysql_query("SELECT * FROM `orderlist` ORDER BY `sortid` ASC");  
  11.           
  12.         ?>  
  13.     <ul id="list">  
  14.       <?php  
  15.                  while($row=mysql_fetch_array($query))  
  16.                    {?>  
  17.       <li id="<?php echo $row['id']?>" title="<?php echo $row['sortid']?>"><img src="../<?php echo $row['pic']?>" width="200"/></li>  
  18.       <?php }?>  
  19.     </ul>  
  20.   </div>  
  21.     
  22. </form>  

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_590.html