在
Vue3
中实现列
拖拽功能可以使用原生的
拖拽事件来
实现，具体步骤如下：
1. 在表格头部的每一列上绑定 `draggable="true"` 属性，使得每一列可以被
拖拽。
2. 监听表格头部的每一列的 `dragstart` 事件，记录当前
拖拽的列的索引。
3. 监听表格头部的每一列的 `dragover` 事件，并阻止默认行为，以允许放置。
4. 监听表格头部的每一列的 `drop` 事件，获取当前
拖拽的列的索引，并交换其与目标列的位置。
以下是一个示例代码：
```
vue
<template>
<table>
<thead>
<tr>
<th v-for="(item, index) in tableColumns"
:key="item.id"
:draggable="true"
@dragstart="dragStart(index)"
@dragover.prevent
@drop="dropHandler(index)">
{{ item.title }}
</th>
</tr>
</thead>
<tbody>
<!-- 表格内容 -->
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
tableColumns: [
{ id: 1, title: '列1' },
{ id: 2, title: '列2' },
{ id: 3, title: '列3' },
],
dragingColumnIndex: null,
};
},
methods: {
dragStart(index) {
this.dragingColumnIndex = index;
},
dropHandler(index) {
if (index !== this.dragingColumnIndex) {
// 交换列顺序
[this.tableColumns[index], this.tableColumns[this.dragingColumnIndex]] = [this.tableColumns[this.dragingColumnIndex], this.tableColumns[index]];
}
},
},
};
</script>
```
在这个示例代码
中，我们使用了 `dragingColumnIndex` 来记录当前
拖拽的列的索引，然后在 `dropHandler`
中交换
拖拽列和目标列的位置。注意，在 `dragover` 事件
中使用 `prevent` 修饰符阻止默认行为，以允许 `drop` 事件触发。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
585
