拖拽排序的原理：
在页面上先将该页面的原排列顺序存放在隐藏域中
<input type="hidden" id="orderlist" value="<?php echo $sort_str;?>" />在每次调整顺序后，将当前列表的id顺序取到js数组中
通过ajax 将id:新的排列对应的id顺序,order：原排列顺序 传递到index.php进行更新处理。拖拽排序就完成了！！！
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 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) {
//console.log(ui.item[0]);
$('td.index', ui.item.parent()).each(function (i) {
//alert(i);
$(this).html(i + 1);
});
},
update=function(){
var new_order = [];
//console.log($list.children("tbody")[0]);
$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>
程序代码：
index.php
<?php
error_reporting(7);
$mysql_server_name='localhost'; // mysql数据库服务器
$mysql_username='root2'; // mysql数据库用户名
$mysql_password='root'; // mysql数据库密码
$mysql_database='demo'; // 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 test 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 test set sort='".$orderarray[$i]."' where id=".$id);
if ($query) {
echo $id;
} else {
echo "none";
}
$i++;
}
}
}
$query=mysql_query("select * from test 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'>".$i."</td>";
$res.="<td class='modules' title=\"".$row['id'] ."\">".$row['id'] ."</td>";
$res.="<td>".$row['sort'] ."</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连接
版权声明：《 jquery对列表进行拖拽排序 》为zhangkang原创文章，转载请注明出处！
最后编辑:2017-7-7 20:07:34