VueDraggablePlus – 免费开源的 Vue 拖拽组件，支持 Vue2 / Vue3，还被尤雨溪推荐了

VueDraggablePlus - 免费开源的 Vue 拖拽组件，支持 Vue2 / Vue3，还被尤雨溪推荐了

今天在网上看到尤雨溪推荐的这款拖拽组件，试了一下非常不错，同样推荐给大家。

(adsbygoogle = window.adsbygoogle || []).push({});

关于 VueDraggablePlus

VueDraggablePlus 是一个专为 Vue 打造的拖拽排序模块，基于 Sortablejs 封装，支持 Vue3 或 Vue 2.7+，本月的 21 日，Vue 作者尤雨溪还在社交媒体上推荐了这款组件。

If you are looking for a drag-and-drop library for Vue (both 2 and 3), this one looks really good。

如果你想找一个 Vue 2 和 Vue 3 都能使用的拖拽库，这个看起来很不错。

—Vue.js 作者尤雨溪

根据 VueDraggablePlus 的作者表示，功能强大的 Sortablejs 一直是前端领域比较知名的拖拽工具库，在2020年我也推荐过官方的 Vue.Draggable，不过这个库的 Vue3 版本一直没有更新，和目前主流的 Vue3 已经严重脱节了，于是才有了 VueDraggablePlus 项目，他们基于 Sortablejs 封装了多种用法，让其支持 Vue3，并且支持以组件、hooks 或指令的方式调用，同时也解决一些直接使用 Sortablejs 时的痛点，让开发者使用起来更简单好用。

VueDraggablePlus - 免费开源的 Vue 拖拽组件，支持 Vue2 / Vue3，还被尤雨溪推荐了 — vue-draggable-plus 官网

vue-draggable-plus 官网

技术特性

功能强大：全面继承 Sortable.js 拖拽排序库的所有功能；
Vue 生态支持好：兼容 Vue 3 和 Vue2；
实用灵活：支持组件、指令、函数式调用，我们喜欢那种编程方式都没问题；
TS 支持：这个库本身就是用 TypeScript 编写，有完整的 TS 文档；
数据绑定：支持 v-model 双向绑定，不需要单独维护排序数据；
支持自定义容器：可以自定某个容器作为拖拽容器，比 Sortable.js 更灵活。

开发上手

安装库

npm install vue-draggable-plus

用组件方式调用

下面演示在 Vue3 上用 TS 来调用的方法，常规的 JS 方法类似，只是列表的数据格式有区别。


  
  
  
  
    
      
        {{ item.name }}
      
    
    
  



import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: '张三',
    id: 1
  },
  {
    name: '李四',
    id: 2
  },
  {
    name: '王五',
    id: 3
  },
  {
    name: '陈六',
    id: 4
  }
])

const el = ref()
const disabled = ref(false)
function pause() {
  el.value?.pause()
}

function start() {
  el.value?.start()
}

const onStart = () => {
  console.log('start')
}

const onUpdate = () => {
  console.log('update')
}



.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

运行上面代码，就可以通过拖拽名字来实现排序，同时右侧会实时同步展示数据排序变化，使用起来非常简单。

vue-draggable-plus 拖拽排序效果

使用建议

表格排序

VueDraggablePlus 的功能非常强大，还可以用来给表格拖拽排序，这在开发管理后台中应用非常广泛，支持拖拽表格行和列。

vue-draggable-plus 表格排序

和 Vue 过渡动画一起使用

VueDraggablePlus 还支持和 Vue 的动画组件使用，使用方法如下：


  

  
    
      
        
          
          
          
        
      
    
    
  



import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const list = ref([
  {
    name: '张三',
    id: '1'
  },
  {
    name: '李四',
    id: '2'
  },
  {
    name: '王五',
    id: '3'
  },
  {
    name: '陈六',
    id: '4'
  }
])

function handleAdd() {
  const length = list.value.length + 1
  list.value.push({
    name: `Juan ${length}`,
    id: `${length}`
  })
}

function remove(index: number) {
  list.value.splice(index, 1)
}



.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.fade-leave-active {
  position: absolute;
}

这种用法常常被用来做删除或者增加元素的动画效果，体验非常丝滑流畅。

拖拽嵌套

元素嵌套的意思就是不同容器下的子项目可以被拖拽，比如从把数据从一个分类拖到另一个分类中，既能排序也能改变分类，VueDraggablePlus 也同样支持。


  
    
    
  



import { ref } from 'vue'
import NestedDraggable from './NestedComponent.vue'

const list = ref([
  {
    name: '子项目1',
    children: [
      {
        name: '子项目2',
        children: []
      }
    ]
  },
  {
    name: '子项目3',
    children: [
      {
        name: '子项目4',
        children: []
      }
    ]
  },
  {
    name: '子项目5',
    children: []
  }
])

官网还有详细的使用文档，而且配上了详细的代码例子，使用起来非常简单。总的来说，VueDraggablePlus 是一个很好的补充，让我们可以用另一种更舒服的方式来实现拖拽的功能需求。