使用tableDnD实现表格拖拽排序功能

最新推荐文章于 2022-07-20 17:47:45 发布

原创最新推荐文章于 2022-07-20 17:47:45 发布 · 891 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用tableDnD插件实现网页表格拖拽排序的方法，通过实例代码展示了如何初始化插件及设置回调函数，以实现行的拖动和排序更新。

今天做项目需要用到拖拽调整排序的功能。
做个使用tableDnD插件实现的记录。
tableDnD插件Github

放个demo代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Table拖拽测试</title>
	<style>
		.highlight {
			background-color: darkgray;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="jQuery.tablednd.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#tableId").tableDnD({
				//拖拽时的样式
				onDragClass:'highlight',
				//开始拖拽回调函数
	            onDragStart:function(table,row){
	            	console.log('onDragStart');
	            },
	            //拖拽排序完成后回调函数
	            onDrop:function(table,row){
	            	console.log('onDrop');
	            }
     	   });
		});
	</script>
</head>
<body>
	<table border="1" cellpadding="0" cellspacing="0" id="tableId" style="line-height: 30px; text-align: center;">
		<thead>
			<tr>
				<th width="20px">#</th>
				<th width="60px">姓名</th>        
				<th width="60px">性别</th>
				<th width="60px">班级</th>
			</tr>
			<tr id="1">
				<td>1</td>
				<td>张强</td>
				<td>男</td>
				<td>二班</td>
			</tr>
			<tr id="2">
				<td>2</td>
				<td>王磊</td>
				<td>男</td>
				<td>一班</td>
			</tr>
			<tr id="3">
				<td>3</td>
				<td>许可</td>
				<td>女</td>
				<td>八班</td>
			</tr>
			<tr id="4">
				<td>4</td>
				<td>李珂</td>
				<td>男</td>
				<td>六班</td>
			</tr>
			<tr id="5">
				<td>5</td>
				<td>孙梦</td>
				<td>女</td>
				<td>七班</td>
			</tr>
			<tr id="6">
				<td>6</td>
				<td>王一凡</td>
				<td>男</td>
				<td>四班</td>
			</tr>
			<tr id="7">
				<td>7</td>
				<td>遥远</td>
				<td>男</td>
				<td>六班</td>
			</tr>
			<tr id="8">
				<td>8</td>
				<td>周礼</td>
				<td>男</td>
				<td>一班</td>
			</tr>
			<tr id="9">
				<td>9</td>
				<td>刘静</td>
				<td>女</td>
				<td>二班</td>
			</tr>
		</thead>
	</table>
</body>
</html>