尤雨溪都在推荐的 Vue 拖拽库！

最近看到尤雨溪推荐了一个基于 Vue 的拖拽库：VueDraggablePlus，本文就来看看这个拖拽库有什么特别之处！

概念

Sortablejs 是一个非常流行的拖拽库，不过这个库的 Vue 3 版本已经三年没更新了，可以说是已经跟 Vue 3 严重脱节，所以诞生了这个项目，这个组件是基于 Sortablejs 的。

在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当使用一些组件库时，如果组件库中没有提供列表根元素的插槽，就很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container。

VueDraggablePlus 是一个支持 Vue2 和 Vue3 的拖拽库，它具有以下特性：

• 功能齐全：全面继承 Sortable.js 的所有功能。
• 无缝迁移：适用于 Vue 3 和 Vue2。
• 灵活使用：支持组件、指令、函数式调用，总有一款是您喜欢的。
• 类型强：用 TypeScript 编写，带有完整的 TS 文档。
• 双向绑定：支持 v-model 双向绑定。
• 自定义容器：将指定容器作为拖拽容器。

使用

在使用 之前，需要使用以下 npm 命令进行安装：

npm install vue-draggable-plus

VueDraggablePlus 支持通过组件、指令、Hooks方式使用：

• 组件方式：

    
      
        {{ item.name }}
      
    



import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

• Hooks 方式：

    
      
        {{ item.name }}
      
    



import { ref } from 'vue'
import { useDraggable, type UseDraggableReturn } from 'vue-draggable-plus'

const el = ref()

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
// 返回值是一个对象，包含了一些方法，比如 start、destroy、pause 等
const draggable = useDraggable(el, list, {
  animation: 150,
  onStart() {
    console.log('start')
  },
  onUpdate() {
    console.log('update')
  }
})

• 指令方式：

    
      
        {{ item.name }}
      
    



import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  console.log('start')
}

function onUpdate() {
  console.log('update')
}

VueDraggablePlus 提供非常多的 API：

小结

Github：https://github.com/Alfred-Skyblue/vue-draggable-plus。