拖拽排序

Vue 拖拽和排序相关组件库。

VueDraggablePlus

基本信息

• 简介: Vue 3 拖拽组件，基于 Sortable.js
• 链接: https://alfred-skyblue.github.io/vue-draggable-plus/
• GitHub: https://github.com/Alfred-Skyblue/vue-draggable-plus

特点

• ✅ 支持 Vue 3
• ✅ 完整的 TypeScript 支持
• ✅ 支持虚拟列表
• ✅ 多种拖拽模式
• ✅ 动画流畅

安装

npm install vue-draggable-plus

基础用法

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  { id: 1, name: '项目 1' },
  { id: 2, name: '项目 2' },
  { id: 3, name: '项目 3' }
])
</script>

<template>
  <VueDraggable v-model="list">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
</template>

---

Vue Draggable (Sortable.js)

基本信息

• 简介: Vue 2/3 拖拽组件
• 链接: https://sortablejs.github.io/Vue.Draggable/
• GitHub: https://github.com/SortableJS/Vue.Draggable

特点

• ✅ 基于 Sortable.js
• ✅ 支持 Vue 2 和 Vue 3
• ✅ 功能强大
• ✅ 社区活跃

---

vue-grid-layout

基本信息

• 简介: 可拖拽的网格布局系统
• 链接: https://jbaysolutions.github.io/vue-grid-layout/
• GitHub: https://github.com/jbaysolutions/vue-grid-layout

特点

• ✅ 网格拖拽布局
• ✅ 响应式
• ✅ 可调整大小
• ✅ 适合仪表盘

使用场景

• 仪表盘布局
• 可视化编辑器
• 自定义工作区

---

@vueuse/gesture

基本信息

• 简介: Vue 手势库
• 链接: https://gesture.vueuse.org/
• GitHub: https://github.com/vueuse/gesture

特点

• ✅ 手势识别
• ✅ 拖拽、缩放、旋转
• ✅ 移动端友好
• ✅ VueUse 生态

---

vue-smooth-dnd

基本信息

• 简介: 平滑的拖放库
• 链接: https://github.com/kutlugsahin/vue-smooth-dnd

特点

• ✅ 平滑动画
• ✅ 触摸支持
• ✅ 嵌套容器
• ✅ 自动滚动

---

对比选择

工具	Vue 3	TypeScript	虚拟列表	推荐场景
VueDraggablePlus	✅	✅	✅	现代 Vue 3 项目
Vue Draggable	✅	⚠️	❌	需要兼容 Vue 2
vue-grid-layout	✅	❌	❌	仪表盘布局
@vueuse/gesture	✅	✅	-	手势交互
vue-smooth-dnd	⚠️	❌	❌	需要平滑动画