一、创建PHP文件
index.php：
<?php error_reporting(7); $mysql_server_name='localhost'; // mysql数据库服务器 $mysql_username='root'; // mysql数据库用户名 $mysql_password='root'; // mysql数据库密码 $mysql_database='move'; // mysql数据库名 $conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting") ; //连接数据库 mysql_query("set names 'utf8'"); //数据库输出编码 mysql_select_db($mysql_database); //打开数据库 $sql ="select * from sortlist order by sort "; //SQL语句 $result = mysql_query($sql,$conn); //查询 if(!empty($_POST)){ $order = $_POST['order']; $itemid = trim($_POST['id']); $idarray=explode(",",$itemid); $orderarray=explode(",",$order); $i=0; if (!empty ($itemid)) { foreach($idarray as $id){ $query = mysql_query("update sortlist set sort='".$orderarray[$i]."' where id=".$id); if ($query) { echo $id; } else { echo "none"; } $i++; } } } $query=mysql_query("select * from sortlist order by sort "); while($rs=mysql_fetch_array($query)){ $sort[]=$rs['sort']; } $sort_str=implode(',',$sort); $res=''; $i=0; while($row = mysql_fetch_array($result)) { $i++; $res.="<tr><td class='index'>".$row['sort'] ."</td>"; $res.="<td class='modules' title=\"".$row['id'] ."\">".$row['id'] ."</td>"; $res.="<td>".$row['year']."</td>"; $res.="<td>".$row['title'] . "</td>"; $res.="<td>".$row['author'] . "</td>"; $res.="</tr>"; //排版代码 } include_once 'html/index.html'; mysql_close(); //关闭MySQL连接
?>
二、创建html文件：
html/index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jqueryUI拖动</title> </head> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></script> <style> tr{cursor: pointer;} #loader{height:24px; text-align:center} </style> <script > $(document).ready(function(){ var $show = $("#loader"); //进度条 var $orderlist = $("#orderlist"); var $list = $("#sort"); var id =$orderlist.val().split(",");//获取排序序号并转换成数组 var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function(e, ui) { $('td.index', ui.item.parent()).each(function (i) { $(this).html(id[i]);//排序序号 }); }, update=function(){ var new_order = []; $list.children("tbody").children("tr").children(".modules").each(function() { new_order.push(this.title); }); var newid = new_order.join(','); var oldid = $orderlist.val(); /* console.log(newid); console.log(oldid); */ $.ajax({ type: "post", url: "index.php", data: { id: newid, order: oldid }, //id:新的排列对应的ID,order：原排列顺序 beforeSend: function() { $show.html("<img src='images/load.gif' /> 正在更新"); }, success: function(msg) { $show.html(""); } }); }; $("#sort tbody").sortable({ helper: fixHelperModified, update:update, stop: updateIndex }).disableSelection(); }); </script> <body> <div id="loader"></div> <input type="hidden" id="orderlist" value="<?php echo $sort_str;?>" /> <table id="sort"> <thead> <tr> <th class="index">序号</th> <th>id</th> <!-- <th>sort</th> --> <th>年份</th> <th>标题</th> <th>作者</th> </tr> </thead> <tbody> <?php echo $res;?> </tbody> </table> </body> </html>
注意：别忘记下载相应的js文件以及理清楚相对应的文件的路径，具体的文件自己可以在网上下载
