vue-draggable-plus
拖拽排序模块,支持 Vue>=v3 或 Vue >=2.7
插件简介:
- 功能齐全:全面继承 Sortable.js 的所有功能
- 无缝迁移:适用于 Vue 3 和 Vue2
- 灵活使用:支持组件、指令、函数式调用,总有一款是您喜欢的
- 类型强:用 TypeScript 编写,带有完整的 TS 文档
- 双向绑定:支持 v-model 双向绑定
- 自定义容器:将指定容器作为拖拽容器
解决痛点:
在 Sortablejs 官方以往的 Vue 组件中,都是通过使用组件作为列表的直接子元素来实现拖拽列表,当我们使用一些组件库时,如果组件库中没有提供列表根元素的插槽,我们很难实现拖拽列表,vue-draggable-plus 完美解决了这个问题,它可以让你在任何元素上使用拖拽列表,我们可以使用指定元素的选择器,来获取到列表根元素,然后将列表根元素作为 Sortablejs 的 container,详情参考指定目标容器。
安装
npm install vue-draggable-plus
使用
组件方式
<template>
<VueDraggable ref="el" v-model="list">
<div v-for="item in list" :key="item.id">
{{ item.name }}
</div>
</VueDraggable>
</template>
<script setup lang="ts">
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
}
])
</script>
函数式调用
<template>
<div ref="el">
<div v-for="item in list" :key="item.id">
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } 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')
}
})
</script>
指令调用
<template>
<div
v-draggable="[
list,
{
animation: 150,
}
]"
>
<div v-for="item in list" :key="item.id">
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
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')
}
</script>
资料来源
官网:https://vue-draggable-plus.pages.dev/
npm地址:https://www.npmjs.com/package/vue-draggable-plus
github地址:https://github.com/Alfred-Skyblue/vue-draggable-plus