Vue Draggable 提供了：开箱即用的拖拽功能、与 Vue 生态的完美集成、高度可定制的交互体验。通过合理使用其 API 和事件系统，可以轻松实现从简单列表到复杂看板的各种交互场景。
安装与引入
npm install vuedraggable
组件引入
import draggable from 'vuedraggable'
export default {
components: {
draggable
}
}
基础用法
简单列表
<template>
<draggable v-model="list">
<div v-for="item in list" :key="item.id">
{{ item.name }}
</div>
</draggable>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
]
}
}
}
</script>
手柄拖动，注意：指定的是class .handle
<draggable
v-model="list"
handle=".handle"
>
<div v-for="item in list" :key="item.id">
<button class="handle">≡</button>
{{ item.name }}
</div>
</draggable>
核心配置选项
属性 类型 说明
v-model Array 必需 绑定的数据数组
handle String 指定拖动手柄的选择器 (例: .handle)
group String 定义可跨列表拖动的分组名称
animation Number 拖动动画时长 (ms)，推荐 150-300
delay Number 长按触发拖动的延迟时间 (ms)
disabled Boolean 禁用拖动功能
ghostClass String 拖动时占位元素的样式类
chosenClass String 被选中元素的样式类
forceFallback Boolean 强制使用原生实现 (解决某些 CSS 框架兼容性问题)
回调事件 API
事件名 触发时机 回调参数
@start 拖动开始时 { originalEvent, item, oldIndex }
@end 拖动释放后 { originalEvent, item, oldIndex, newIndex }
@add 元素被添加到其他列表时 { originalEvent, item, newIndex }
@remove 元素从列表移除时 { originalEvent, item, oldIndex }
@update 列表顺序变化时 { originalEvent, oldIndex, newIndex }
@choose 元素被选中时 { originalEvent, item, oldIndex }
@unchoose 元素取消选中时 { originalEvent, item, oldIndex }
自定义视觉反馈
/* 拖动时样式 */
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
/* 选中时样式 */
.chosen {
transform: scale(1.02);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
