vue拖拽容器实现
实现 Vue 拖拽容器的基本方法
使用 HTML5 原生拖拽 API
通过 draggable 属性和拖拽事件（dragstart、dragend、dragover、drop）实现基础拖拽功能。适用于简单场景，需手动处理拖拽逻辑和数据更新。
<template>
<div
v-for="item in list"
:key="item.id"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent
@drop="handleDrop($event, item)"
>
{{ item.content }}
</div>
</template>
<script>
export default {
data() {
return {
list: [...],
draggedItem: null
};
},
methods: {
handleDragStart(e, item) {
this.draggedItem = item;
e.dataTransfer.effectAllowed = 'move';
},
handleDrop(e, targetItem) {
const fromIndex = this.list.indexOf(this.draggedItem);
const toIndex = this.list.indexOf(targetItem);
this.list.splice(fromIndex, 1);
this.list.splice(toIndex, 0, this.draggedItem);
}
}
};
</script>使用第三方库 Vue.Draggable
安装与基础用法
Vue.Draggable 是基于 Sortable.js 的封装，提供声明式拖拽支持。需先安装依赖：
npm install vuedraggable示例代码：
<template>
<draggable
v-model="list"
@end="onDragEnd"
item-key="id"
>
<template #item="{ element }">
<div>{{ element.content }}</div>
</template>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
export default {
components: { draggable },
data() {
return { list: [...] };
},
methods: {
onDragEnd() {
console.log('拖拽完成后的列表:', this.list);
}
}
};
</script>实现拖拽排序与跨容器交换
多容器间拖拽
通过配置 group 属性实现跨容器元素交换，需确保同一组的 name 值相同。
<template>
<div class="container">
<draggable
v-model="listA"
group="shared"
item-key="id"
>
<!-- 列表A内容 -->
</draggable>
<draggable
v-model="listB"
group="shared"
item-key="id"
>
<!-- 列表B内容 -->
</draggable>
</div>
</template>自定义拖拽样式与动画
添加过渡效果
利用 Vue 的 <transition-group> 或 CSS 动画增强视觉反馈：
.draggable-item {
transition: transform 0.2s;
}
.sortable-chosen {
background-color: #f0f0f0;
}
.sortable-ghost {
opacity: 0.5;
}注意事项
- 性能优化：大数据量时使用
ghostClass和chosenClass减少渲染压力。 - 移动端适配：部分库需额外插件支持触摸事件（如
Sortable.js的touch-action配置）。 - 数据持久化：拖拽后需同步更新后端数据，通常通过
@end事件触发 API 调用。
通过上述方法可快速实现灵活、高性能的拖拽容器功能。复杂场景建议优先选择 Vue.Draggable 等成熟方案。
