vue实现拖拽排序表格_html-js-css

引言

拖拽排序是我们经常遇到的应用场景，那大家知道如何去实现它嘛。其实HTML5标准为每个元素添加了draggable属性，当这个属性为true时，此元素就是课拖拽状态。为了响应HTML5标准，JS也提供了相应的拖拽/释放监听事件：ondragstart、ondragover、ondrop

效果展示

拖拽排序线上演示
示例源代码下载

代码展示

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>拖拽排序表格title>
		<link rel="stylesheet" type="text/css" href="https://web.chengqige.com/CSDN/draggable/vue/css/QI.css" />
		<link rel="stylesheet" href="https://web.chengqige.com/myTool/messagebox/msg.css">
		<style>
			.drag {
				width: 100px;
				height: 100px;
				background-color: aqua;
			}
		style>
		<script src="https://web.chengqige.com/CSDN/draggable/vue/js/vue.min.js">script>
		<script src="https://web.chengqige.com/myTool/messagebox/msg.js">script>
	head>
	<body>
		<div id="app">
			<table>
				<tr draggable="false">
					<th>学号th>
					<th>班级th>
					<th>姓名th>
				tr>
				<tbody @dragover.prevent="dragEnter($event)" @dragstart="dragStart($event)" @dragend="dragEnd($event)">
					<tr draggable="true" v-for="(item,index) in dataSourse" :key="index">
						<td>{{item.sno}}td>
						<td>{{item.category}}td>
						<td>{{item.name}}td>
					tr>
				tbody>
			table>
		div>
		<script>
			var app = new Vue({
				el: '#app',
				data() {
					return {
						fromIndex: 0,
						toIndex: 0,
						dataSourse: [{
							sno: '18413001',
							category: '181',
							name: '小程'
						}, {
							sno: '18413002',
							category: '182',
							name: '小张'
						}, {
							sno: '18413003',
							category: '183',
							name: '小李'
						}, {
							sno: '18413004',
							category: '184',
							name: '小韩'
						}]
					}
				},
				methods: {
				    // 交换位置
					term(from, to) {
						let term = this.dataSourse[to]
						this.dataSourse[to] = this.dataSourse[from]
						this.dataSourse[from] = term
						this.fromIndex = to
						this.$forceUpdate()
					},
					dragEnter(e) {
						let sno = e.target.parentElement.childNodes[0].innerText.toString()
						this.toIndex = this.dataSourse.findIndex(item => item.sno === sno)
						this.term(this.fromIndex, this.toIndex)
					},
					dragStart(e) {
						let sno = e.target.childNodes[0].innerText.toString()
						this.fromIndex = this.dataSourse.findIndex(item => item.sno === sno)
					},
					dragEnd(e) {
						var msg = new Messgebox()
						msg.show({
							type: 'success',
							msg: '排序成功',
							timer: 800
						})
					}
				}
			})
		script>
	body>
html>

简单说下思路吧，就是利用HTML5的可拖拽属性draggable使得元素在视图层上变得可拖拽。视图层搞定后那么接下来就要处理表现层，展现拖拽排序的效果了。我们利用dragStart事件获取我们拖拽的行，并获取这行记录的id；然后利用dragover事件获取我们拖拽到目标行（也就是我们要替换的行），并获取这行记录的id，然后使得data中的数据交换位置就好，由于交换位置在vue2中不会得到监听，所以我们要使用forthupdate强制更新视图

vue实现拖拽排序表格

发表评论

评论列表（0条）