vue实现列拖拽
Vue 实现列拖拽功能
使用原生 HTML5 拖放 API
在 Vue 中可以通过原生 HTML5 的拖放 API 实现列拖拽功能。需要处理 draggable、dragstart、dragover 和 drop 事件。
<template>
<div>
<div
v-for="(item, index) in items"
:key="index"
draggable="true"
@dragstart="handleDragStart($event, index)"
@dragover.prevent="handleDragOver($event, index)"
@drop="handleDrop($event, index)"
class="draggable-item"
>
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
draggedIndex: null
}
},
methods: {
handleDragStart(event, index) {
this.draggedIndex = index
event.dataTransfer.effectAllowed = 'move'
},
handleDragOver(event, index) {
event.preventDefault()
event.dataTransfer.dropEffect = 'move'
},
handleDrop(event, index) {
if (this.draggedIndex !== null) {
const item = this.items.splice(this.draggedIndex, 1)[0]
this.items.splice(index, 0, item)
this.draggedIndex = null
}
}
}
}
</script>
<style>
.draggable-item {
padding: 10px;
margin: 5px;
background: #f0f0f0;
cursor: move;
}
</style>使用第三方库 Vue.Draggable
Vue.Draggable 是一个基于 Sortable.js 的 Vue 组件，可以更简单地实现拖拽功能。
安装依赖：
npm install vuedraggable使用示例：
<template>
<div>
<draggable
v-model="items"
@start="drag=true"
@end="drag=false"
item-key="id"
>
<template #item="{element}">
<div class="draggable-item">
{{ element.name }}
</div>
</template>
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
],
drag: false
}
}
}
</script>
<style>
.draggable-item {
padding: 10px;
margin: 5px;
background: #f0f0f0;
}
</style>实现表格列拖拽
对于表格列的拖拽，可以使用类似的原理，但需要处理表头元素的拖放。
<template>
<table>
<thead>
<tr>
<th
v-for="(col, index) in columns"
:key="col.key"
draggable="true"
@dragstart="handleDragStart($event, index)"
@dragover.prevent="handleDragOver($event, index)"
@drop="handleDrop($event, index)"
>
{{ col.title }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in data" :key="row.id">
<td v-for="col in columns" :key="col.key">
{{ row[col.key] }}
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data() {
return {
columns: [
{ key: 'name', title: 'Name' },
{ key: 'age', title: 'Age' },
{ key: 'address', title: 'Address' }
],
data: [
{ id: 1, name: 'John', age: 20, address: 'New York' },
{ id: 2, name: 'Jane', age: 24, address: 'London' }
],
draggedColumnIndex: null
}
},
methods: {
handleDragStart(event, index) {
this.draggedColumnIndex = index
event.dataTransfer.effectAllowed = 'move'
},
handleDragOver(event, index) {
event.preventDefault()
event.dataTransfer.dropEffect = 'move'
},
handleDrop(event, index) {
if (this.draggedColumnIndex !== null) {
const column = this.columns.splice(this.draggedColumnIndex, 1)[0]
this.columns.splice(index, 0, column)
this.draggedColumnIndex = null
}
}
}
}
</script>注意事项
- 移动设备不支持原生 HTML5 拖放 API，需要使用触摸事件或专门的移动端库
- 复杂的拖拽场景建议使用成熟的第三方库如 Vue.Draggable
- 拖拽操作会影响数据顺序，需要确保数据同步更新
- 对于大型列表，考虑添加拖拽时的视觉反馈和性能优化
以上方法可以根据具体需求选择适合的实现方式，Vue.Draggable 提供了更多高级功能如动画、拖拽手柄、限制区域等，适合复杂场景。
