PHP+jQuery

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('mouover',  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                 beforend: 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 t sort='$itemid' where id=1");  6         if ($query) {  7             echo $itemid;  8         } el {  9             echo "none"; 10         } 11     } 12 }

本文转自：转载请注明出处！