vue实现表格拖拽排序
实现表格拖拽排序的基本思路
在Vue中实现表格拖拽排序通常需要结合HTML5的拖拽API或第三方库（如Sortable.js、Vue.Draggable）。以下提供两种主流实现方式：
使用HTML5原生拖拽API
HTML5提供了原生的拖放接口，适合轻量级需求：
<template>
<table>
<tr
v-for="(item, index) in list"
:key="item.id"
draggable="true"
@dragstart="handleDragStart(index)"
@dragover.prevent="handleDragOver(index)"
@drop="handleDrop(index)"
>
<td>{{ item.name }}</td>
</tr>
</table>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
],
draggedIndex: null
}
},
methods: {
handleDragStart(index) {
this.draggedIndex = index
},
handleDragOver(index) {
if (this.draggedIndex !== null && this.draggedIndex !== index) {
const item = this.list[this.draggedIndex]
this.list.splice(this.draggedIndex, 1)
this.list.splice(index, 0, item)
this.draggedIndex = index
}
},
handleDrop() {
this.draggedIndex = null
}
}
}
</script>使用Vue.Draggable插件
对于更复杂的需求，推荐使用基于Sortable.js封装的Vue组件：
npm install vuedraggable<template>
<draggable
v-model="list"
tag="tbody"
item-key="id"
@end="onDragEnd"
>
<template #item="{ element }">
<tr>
<td>{{ element.name }}</td>
</tr>
</template>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
},
methods: {
onDragEnd() {
console.log('排序完成', this.list)
}
}
}
</script>关键注意事项
表格拖拽时需要确保dragover事件调用preventDefault()，否则拖放可能无法正常工作
对于复杂数据结构，建议使用唯一标识符（如id）作为key，而非数组索引
移动端支持需要额外处理触摸事件，或使用支持移动端的库如interact.js
样式优化建议
添加视觉反馈提升用户体验：
tr[draggable="true"] {
cursor: move;
}
tr.ghost {
opacity: 0.5;
background: #c8ebfb;
}通过以上方法可以灵活实现Vue中的表格拖拽排序功能，根据项目复杂度选择适合的方案。
