vue实现拖拽实现组件嵌套
Vue 实现拖拽组件嵌套
使用 vue-draggable-next 库
安装依赖：
npm install vue-draggable-next基础实现代码：
<template>
<draggable
v-model="list"
group="components"
@start="drag=true"
@end="drag=false"
>
<div v-for="element in list" :key="element.id">
{{ element.name }}
</div>
</draggable>
</template>
<script>
import { ref } from 'vue';
import draggable from 'vue-draggable-next';
export default {
components: { draggable },
setup() {
const list = ref([
{ id: 1, name: '组件A' },
{ id: 2, name: '组件B' }
]);
return { list };
}
};
</script>嵌套拖拽实现
多层嵌套结构示例：
<template>
<draggable
v-model="treeData"
group="nested"
item-key="id"
:component-data="{ tag: 'ul', type: 'transition-group' }"
>
<template #item="{ element }">
<li>
{{ element.name }}
<draggable
v-if="element.children"
v-model="element.children"
group="nested"
item-key="id"
>
<template #item="{ element: child }">
<div>{{ child.name }}</div>
</template>
</draggable>
</li>
</template>
</draggable>
</template>
<script>
import { ref } from 'vue';
import draggable from 'vue-draggable-next';
export default {
components: { draggable },
setup() {
const treeData = ref([
{
id: 1,
name: '父组件1',
children: [
{ id: 11, name: '子组件1-1' },
{ id: 12, name: '子组件1-2' }
]
},
{
id: 2,
name: '父组件2',
children: [
{ id: 21, name: '子组件2-1' }
]
}
]);
return { treeData };
}
};
</script>自定义拖拽样式
添加拖拽样式控制：
.drag-item {
padding: 8px;
margin: 4px;
background: #f0f0f0;
border: 1px dashed #ccc;
}
.drag-ghost {
opacity: 0.5;
background: #c8ebfb;
}事件处理
常用事件处理示例：
const handleDragStart = (event) => {
console.log('开始拖拽', event.item);
};
const handleDragEnd = (event) => {
console.log('结束拖拽', event.item);
};
const handleChange = (event) => {
console.log('位置变化', event);
};移动端适配
添加触摸支持：
const dragOptions = {
animation: 200,
touchStartThreshold: 3,
forceFallback: true
};性能优化
大数据量优化方案：
const virtualOptions = {
itemSize: 50,
height: 500,
delay: 100
};
