js拖拽排序并保存到数据库

一、创建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>年份</th>
<th>标题</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<?php echo $res;?>
</tbody>
</table>
</body>
</html>

注意：别忘记下载相应的js文件以及理清楚相对应的文件的路径，具体的文件自己可以在网上下载

js拖拽排序并保存到数据库相关推荐

html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
html列表拖拽排序插件,js拖拽排序插件Sortable
插件描述:功能强大的Javript拖拽排序库Sortable,拖拽兼容性好,零依赖更新时间:2020-05-15 18:19:16 SortableJS 功能强大的JavaScript 拖拽库特性 ...
android gridview拖动排序,Asp.net GridView 拖拽排序原创（欢迎拍砖，敬请嘴下留情！）...
原理:客户端排序(或者说组织新的排序顺序),Ajax 更新服务器端数据. 客户端用jquery插件sortable实现拖拽排序,保存之前检索顺序变化了的数据,并组织成Json数据,用AJax传送到服务 ...
easyui树拖拽排序java_easyui tree 拖拽功能并将数据返回后台保存至数据库
1.需要实现tree的拖拽功能,首先在定义一个tree时候需要设置 dnd : true 2.easyui 给我们提供了一个onDrop : function(target, source, poin ...
全网为数不多清晰可行的在VUE中使用sortable.js实现动态拖拽排序的教程！
目录 0 写在前面的 1 依赖安装 2 手写简单标签演示 3 要点 4 效果 0 写在前面的首先批评以下文章 (10条消息) sortable.js 实现拖拽_sortablejs_花铛的博客-CS ...
JS的平凡之路--简易的图片拖拽排序
由HTML5的拖放API,实现的简易图片拖放效果. 一.HTML5拖放API的知识点首先我们得知道元素怎么才可以被拖放,需要设置它们的draggable属性,其中img和a标签的dragable ...
zTree的拖拽排序
ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...
vue中实现拖拽排序
原生拖拽 API 实现拖拽设置元素 dragable 将元素的 dragable 属性设置为 true (文本图片链接的draggable 属性默认为 true)则元素可拖放 <div ...

js拖拽排序并保存到数据库

js拖拽排序并保存到数据库相关推荐

最新文章

热门文章