vue实现拆分拖拽
Vue 实现拆分拖拽功能
拆分拖拽功能通常指将一个元素拆分为多个部分，并允许用户通过拖拽重新排列或组合这些部分。以下是基于 Vue 的实现方法。
使用 Vue.Draggable 库
Vue.Draggable 是基于 Sortable.js 的 Vue 组件，适合实现拖拽排序功能。
安装依赖：
npm install vuedraggable基础示例：
<template>
<draggable v-model="items" group="components" @end="onDragEnd">
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>
</draggable>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: { draggable },
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
},
methods: {
onDragEnd() {
console.log('拖拽结束')
}
}
}
</script>自定义拖拽实现
如果需要更精细的控制，可以手动实现拖拽逻辑。
<template>
<div
v-for="item in items"
:key="item.id"
draggable="true"
@dragstart="startDrag($event, item)"
@dragover.prevent
@drop="onDrop($event, item)"
>
{{ item.name }}
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
],
draggedItem: null
}
},
methods: {
startDrag(event, item) {
this.draggedItem = item
},
onDrop(event, targetItem) {
if (this.draggedItem) {
const draggedIndex = this.items.indexOf(this.draggedItem)
const targetIndex = this.items.indexOf(targetItem)
this.items.splice(draggedIndex, 1)
this.items.splice(targetIndex, 0, this.draggedItem)
}
}
}
}
</script>拆分面板拖拽
对于可拆分的面板布局，可以结合 CSS Grid 或 Flexbox 实现。
<template>
<div class="container">
<div
v-for="panel in panels"
:key="panel.id"
class="panel"
draggable="true"
@dragstart="dragStart(panel)"
@dragover.prevent
@drop="drop(panel)"
>
{{ panel.title }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
panels: [
{ id: 1, title: 'Panel 1' },
{ id: 2, title: 'Panel 2' }
],
draggedPanel: null
}
},
methods: {
dragStart(panel) {
this.draggedPanel = panel
},
drop(targetPanel) {
const draggedIndex = this.panels.indexOf(this.draggedPanel)
const targetIndex = this.panels.indexOf(targetPanel)
this.panels.splice(draggedIndex, 1)
this.panels.splice(targetIndex, 0, this.draggedPanel)
}
}
}
</script>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.panel {
border: 1px solid #ccc;
padding: 10px;
}
</style>高级功能扩展
- 限制拖拽方向：
<draggable v-model="items" :move="checkMove"> <!-- 内容 --> </draggable>
methods: { checkMove(evt) { return evt.draggedContext.element.type !== 'forbidden' } }
2. 动画效果：
```vue
<draggable v-model="items" animation="200">
<!-- 内容 -->
</draggable>- 跨组件拖拽：
<draggable v-model="list1" group="shared"> <!-- 列表1内容 --> </draggable>
以上方法提供了从简单到复杂的拖拽实现方案，可根据具体需求选择合适的实现方式。
