PHP+jQuery+ui实现拖动布局并将排序结果保存到数据库

本文讲解如何使用jquery+ui及php实现拖动浮动层，并将拖动后的浮动层位置保存到数据库。
首先我们引入jquery库和jquery-ui.min.js
<script type=text/javascript src=jquery.js></script> <script type='text/javascript' src='js/jquery-ui.min.js'></script>接着我们放置一个拖动时的加载图片，和从数据库读取出来的多个模块拖动层.modules，及#orderlist用于记录模块的排序值。
<div id=loader></div> <div id=module_list> <input type=hidden id=orderlist value=<?php echo $sort; ?> /> <!--?php for ($i = 0; $i < $len; $i++) { ?--> <div class=modules title=<?php echo $sort_arr[$i]; ?>> <h3 class=m_title>module: <!--?php echo $sort_arr[$i]; ?--></h3> <p> <!--?php echo $sort_arr[$i]; ?--></p> </div> <!--?php } ?--> <div class=cl></div> </div>jquery
$(function() { $(.m_title).bind('mouseover', function() { $(this).css(cursor, move) }); var $show = $(#loader); //进度条 var $orderlist = $(#orderlist); var $list = $(#module_list); $list.sortable({ opacity: 0.6, revert: true, cursor: 'move', handle: '.m_title', update: function() { var new_order = []; $list.children(.modules).each(function() { new_order.push(this.title); }); var newid = new_order.join(','); var oldid = $orderlist.val(); $.ajax({ type: post, url: update.php, data: { id: newid, order: oldid }, //id:新的排列对应的id,order：原排列顺序 beforesend: function() { $show.html(<img src='images/load.gif' /> 正在更新); }, success: function(msg) { $show.html(); } }); } }); });ajax.php
拖动后保存到数据库，我们看下ajax.php中代码：
$order = $_post['order']; $itemid = trim($_post['id']); if (!empty($itemid)) { if ($order != $itemid) { $query = mysql_query(update sortlist set sort='$itemid' where id=1); if ($query) { echo $itemid; } else { echo none; } } }

南京云服务器租用
阿里云ecs服务器怎么配置
英雄联盟fps低怎么办_教你英雄联盟fps比较低的处理方法
买域名怎么砍价？购买域名后如何使用？
国内有哪些厂商提供云服务器
香港云服务器租赁技巧
租个阿里云的服务器
【芜湖seo】利用竞价思维做SEO的可行性