vue 实现拖拽布局
Vue 实现拖拽布局的方法
使用原生HTML5拖拽API
通过HTML5的draggable属性和Vue的事件绑定实现基础拖拽功能。在元素上添加draggable="true"，并通过@dragstart、@dragover、@drop等事件处理拖拽逻辑。
<template>
<div
v-for="item in items"
:key="item.id"
draggable="true"
@dragstart="handleDragStart($event, item.id)"
@dragover.prevent
@drop="handleDrop($event, item.id)"
>
{{ item.content }}
</div>
</template>
<script>
export default {
data() {
return {
items: [...],
draggedItemId: null
}
},
methods: {
handleDragStart(e, id) {
this.draggedItemId = id;
e.dataTransfer.effectAllowed = 'move';
},
handleDrop(e, targetId) {
const draggedIndex = this.items.findIndex(item => item.id === this.draggedItemId);
const targetIndex = this.items.findIndex(item => item.id === targetId);
[this.items[draggedIndex], this.items[targetIndex]] =
[this.items[targetIndex], this.items[draggedIndex]];
}
}
}
</script>使用第三方库Vue.Draggable
Vue.Draggable是基于Sortable.js的Vue组件，提供更完善的拖拽功能，适合列表排序、跨容器拖拽等场景。
安装依赖：
npm install vuedraggable基础用法：
<template>
<draggable
v-model="list"
@end="onDragEnd"
item-key="id"
>
<template #item="{element}">
<div>{{ element.name }}</div>
</template>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: { draggable },
data() {
return {
list: [...]
}
},
methods: {
onDragEnd() {
console.log('排序更新后的数据:', this.list);
}
}
}
</script>实现网格拖拽布局
对于网格布局的拖拽，可使用CSS Grid配合拖拽库实现。Vue.Draggable支持通过group属性实现跨容器拖拽。
<template>
<div class="grid-container">
<draggable
v-model="items"
group="grid"
@change="logChange"
>
<template #item="{element}">
<div class="grid-item">{{ element.text }}</div>
</template>
</draggable>
</div>
</template>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
border: 1px solid #ccc;
padding: 20px;
}
</style>高级功能实现
对于需要限制拖拽范围或添加占位符的场景，可通过以下配置增强：
<draggable
v-model="items"
:options="{
animation: 150,
ghostClass: 'ghost',
chosenClass: 'chosen',
dragClass: 'drag'
}"
>
<!-- 内容 -->
</draggable>
<style>
.ghost {
opacity: 0.5;
}
.chosen {
background: #f0f0f0;
}
.drag {
cursor: grabbing;
}
</style>性能优化建议
对于大型列表，使用v-for时应配合:key绑定唯一标识。考虑使用虚拟滚动技术（如vue-virtual-scroller）减少DOM节点数量。避免在拖拽过程中频繁触发计算属性或侦听器。
通过上述方法，可以灵活实现从简单到复杂的各种拖拽布局需求。Vue.Draggable提供了最全面的功能支持，而原生API适合轻量级场景。根据项目需求选择合适方案即可。
