Vue Draggable 实现优雅的拖拽排序

Vue Draggable 提供了：开箱即用的拖拽功能、与 Vue 生态的完美集成、高度可定制的交互体验。通过合理使用其 API 和事件系统，可以轻松实现从简单列表到复杂看板的各种交互场景。

2025-03-23 22:32:18

1224 热度

408 浏览

安装与引入

bash 复制代码

npm install vuedraggable

组件引入

vue 复制代码

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  }
}

基础用法

简单列表

vue 复制代码

<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

vue 复制代码

<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 }

自定义视觉反馈

css 复制代码

/* 拖动时样式 */
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 选中时样式 */
.chosen {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

转载：转载请注明原文链接 - Vue Draggable 实现优雅的拖拽排序

0/50

暂无评论，快来抢沙发吧~

安装与引入

组件引入

基础用法

核心配置选项

回调事件 API

自定义视觉反馈

评论 (0)