vue实现拖拽实现布局
Vue 实现拖拽布局的方法
使用 Vue.Draggable 库
Vue.Draggable 是基于 Sortable.js 的 Vue 组件，适合实现列表或网格的拖拽排序。
安装依赖：
npm install vuedraggable基本用法示例：
<template>
<draggable v-model="list" @end="onDragEnd">
<div v-for="item in list" :key="item.id">{{ item.name }}</div>
</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>使用 HTML5 原生拖拽 API
通过 HTML5 的 draggable 属性和相关事件实现基础拖拽功能。
示例代码：
<template>
<div
v-for="item in items"
:key="item.id"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent
@drop="handleDrop($event, item)"
>
{{ item.text }}
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'Item A' },
{ id: 2, text: 'Item B' }
],
draggedItem: null
}
},
methods: {
handleDragStart(e, item) {
this.draggedItem = item
e.dataTransfer.effectAllowed = 'move'
},
handleDrop(e, targetItem) {
const indexDragged = this.items.indexOf(this.draggedItem)
const indexTarget = this.items.indexOf(targetItem)
this.items.splice(indexDragged, 1)
this.items.splice(indexTarget, 0, this.draggedItem)
}
}
}
</script>实现可拖拽布局系统
对于复杂的布局系统，可以结合 Vue.Draggable 和 CSS Grid/Flexbox。
网格布局示例：
<template>
<div class="grid-container">
<draggable
v-model="gridItems"
class="grid"
:options="{group: 'grid', animation: 150}"
>
<div
v-for="item in gridItems"
:key="item.id"
class="grid-item"
>
{{ item.content }}
</div>
</draggable>
</div>
</template>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
border: 1px solid #ccc;
padding: 20px;
background: #f9f9f9;
}
</style>高级功能实现
对于需要限制拖拽区域或添加占位符的高级需求，可以配置 Vue.Draggable 的选项。
配置示例：
<draggable
v-model="items"
:options="{
animation: 150,
ghostClass: 'ghost',
chosenClass: 'chosen',
dragClass: 'drag',
handle: '.handle'
}"
>
<!-- 内容 -->
</draggable>对应的 CSS 样式：
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
.chosen {
background: #f0f0f0;
}
.drag {
cursor: move;
}
.handle {
cursor: grab;
}这些方法可以根据具体需求组合使用，实现从简单到复杂的各种拖拽布局场景。
