引言
拖拽排序是我们经常遇到的应用场景，那大家知道如何去实现它嘛。其实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强制更新视图
相关参考资料
在学会如何实现拖拽排序之后，我们还要夯实一下知识点，这样才能使得知识掌握更全满！下面是业内权威文档MDN文档对拖拽行为的详细介绍：
HTML5中可拖拽属性
JS对拖拽监听事件支持