首页>>Jquery文字>>jQuery实现拖动布局 排序结果可以保存到数据库 刷新后为更新后的排序(2014-10-11)

jQuery实现拖动布局 排序结果可以保存到数据库 刷新后为更新后的排序

 本站已经发布过垂直拖动排序的文章《jquery添加和删除数据 无刷新,拖动改变排序,jquery无刷新编辑内容并提交》

这个是可以多行多列任意位置拖动

jQuery实现拖动布局 排序结果可以保存到数据库 刷新后为更新后的排序
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

SQL Code
  1. CREATE TABLE IF NOT EXISTS `sortlist` (  
  2.   `id` int(11) NOT NULL auto_increment,  
  3.   `sort` varchar(100) NOT NULL,  
  4.   PRIMARY KEY  (`id`)  
  5. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;  
  6.   
  7. --  
  8.  
  9.   
  10. INSERT INTO `sortlist` (`id`, `sort`) VALUES  
  11. (1, '1,2,6,5,3,4,7,8,9,10,11,12');  

index.php

 

PHP Code
  1. <?php  
  2.   
  3. $query=mysql_query("select * from sortlist where id=1");  
  4. if($rs=mysql_fetch_array($query)){  
  5.     $sort=$rs['sort'];  
  6. }  
  7. $sort_arr=explode(",",$sort);  
  8. $len=count($sort_arr);  
  9. ?>  
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  11. <html xmlns="http://www.w3.org/1999/xhtml">  
  12. <head>  
  13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  14. <title>jQuery实现拖动布局 排序结果可以保存到数据库 刷新后为更新后的排序</title>  
  15. <link rel="stylesheet" type="text/css" href="../css/main.css" />  
  16. <style type="text/css">  
  17. #module_list{margin-left:4px}  
  18. .modules{float:left; width:200px; height:140px; margin:10px; overflow:hidden; border:1px solid #acc6e9; background:#e8f5fe}  
  19. .m_title{height:24px; line-height:24px; background:#afc6e9}  
  20. #loader{height:24px; text-align:center}  
  21. .clear{clear:both}  
  22. </style>  
  23. <script type="text/javascript" src="../../js/jquery-1.4.3.js"></script>  
  24. <script type='text/javascript' src='jquery-ui.min.js'></script>  
  25. <script type="text/javascript" src="idrag.js"></script>  
  26.  <link rel="stylesheet" type="text/css" href="../demo.css">  
  27. </head>  
  28.   
  29. <body>  
  30.   
  31.   
  32. <div id="main">  
  33.   
  34.   <div id="loader"></div>  
  35.   <div id="module_list">  
  36.    <input type="hidden" id="orderlist" value="<?php echo $sort;?>" />  
  37.    <?php   
  38.      for($i=0;$i<$len;$i++){  
  39.    ?>  
  40.    <div class="modules" title="<?php echo $sort_arr[$i]; ?>">  
  41.       <h3 class="m_title">Module:<?php echo $sort_arr[$i]; ?></h3>  
  42.       <p><?php echo $sort_arr[$i]; ?></p>  
  43.    </div>  
  44.    <?php } ?>  
  45.    <div class="clear"></div>  
  46.   </div>  
  47. </div>  
  48. </div>  
  49. </body>  
  50. </html>  

 update.php

 

PHP Code
  1. $order = $_POST['order'];  
  2. //echo $order;  
  3. $itemid = trim($_POST['id']);  
  4. if (!emptyempty ($itemid)) {  
  5.     if ($order != $itemid) {  
  6.         $query = mysql_query("update sortlist set sort='$itemid' where id=1");  
  7.         if ($query) {  
  8.             echo $itemid;  
  9.         } else {  
  10.             echo "none";  
  11.         }  
  12.     }  
  13. }  

 

JavaScript Code
  1. // JavaScript Document  
  2. $(function(){  
  3.     $(".m_title").bind('mouseover',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: { id: newid, order: oldid },   //id:新的排列对应的ID,order：原排列顺序  
  27.                 beforeSend: function() {  
  28.                      $show.html("<img src='load.gif' /> 正在更新");  
  29.                 },  
  30.                 success: function(msg) {  
  31.                      //alert(msg);  
  32.                      $show.html("");  
  33.                 }  
  34.              });  
  35.         }  
  36.     });  
  37. });  

 


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