Id	Name
{{ item.id }}	{{ item.name }}

--- theme: smartblue --- # vue-draggable-plus ## 前言前段时间偶然翻掘金的过程中发现有人宣传 `vue` 的拖拽库断代了，那么我也来蹭一下热度。 ## Sortablejs `Sortablejs` 是一个功能强大的 `JavaScript` 拖拽库，并且提供了 `vue` 相关的组件 `vue-draggable`，并且在 `vue3` 的前期，提供了 `vue-draggable-next`，但是可能由于作者的生活过于繁忙的原因，这个库已经两年没有更新了，在当前 `vue3` 的版本中并不适用，于是乎本人突发奇想，写了一个 `vue-draggable-plus`（其实很久之前就写好了，没有可以宣传），它用于兼容 `vue2.7` 和 `vue3` 以上的版本，下面我们来介绍一下它。 ## vue-draggable-plus [`vue-draggable-plus`](https://alfred-skyblue.github.io/vue-draggable-plus/) 它用于延续 `vue-draggable` 核心理念，提供 `vue` 组件用于双向绑定数据列表，实现拖拽排序、克隆等功能，同时它还支持函数式、指令式的使用方式，让你使用起来更加方便，废话不多生活，我们先上图 ![2023-11-09 18.47.24.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0228ace5127f4357ba89fedfea215dfd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1340&h=952&s=567441&e=gif&f=91&b=212121) 更多演示请参考：[demo](https://alfred-skyblue.github.io/vue-draggable-plus/demo/basic/) ### 安装 ```bash npm install vue-draggable-plus ``` ### 使用 [`vue-draggable-plus`](https://alfred-skyblue.github.io/vue-draggable-plus/) 支持三种使用方式：组件使用、函数式使用、指令式使用下面我们来一一介绍： 1. 组件式使用：它和传统的vue组件的使用方式一样，支持双向绑定数据： ```html ``` 2. 函数式使用： ```html ``` 它就像你使用 `vueuse` 一样接受一个 `element` 的引用，和一个响应式列表数据 3. 指令式使用由于指令的特殊性，指令只能绑定您在 `setup` 中绑定的数据，它并不能支持异步绑定数据，如果您的数据来自于异步获取，那么请您使用组件或者函数式实现 ```vue ``` ## 指定目标容器在 `Sortablejs` 官方以往的 `Vue` 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当我们使用一些组件库时，如果组件库中没有提供列表根元素的插槽，我们很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，我们可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 `Sortablejs` 的 `container`，我们来看一下用法： - Table.vue ```html ``` - App.vue ```html ``` 来看效果： ![2023-11-09 19.11.29.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/df7131d889dd48bb806fc67075f4c022~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1066&h=1278&s=323540&e=gif&f=99&b=212121) ## 结尾如果您有使用需求，请参考文档：[vue-draggable-plus](https://alfred-skyblue.github.io/vue-draggable-plus/)，当然如果您不需要高度定制化，使用 [vueuse](https://vueuse.org/) 中的 [useSortable](https://vueuse.org/integrations/useSortable/) 也是一样的。如果它对您有用，请帮忙点个star：[GitHub](https://github.com/Alfred-Skyblue/vue-draggable-plus) 友情链接：[svelte-draggable-plus](https://alfred-skyblue.github.io/svelte-draggable-plus/) > 注：如有朋友喜欢一起做开源的，可以联系我 +v：yuanfang0353，拉你进群