强烈推荐一款好用到爆的可视化拖拽库
共 10768字，需浏览 22分钟
·
2024-04-28 09:18
大厂技术 高级前端 Node进阶
点击上方 程序员成长指北，关注公众号
回复1，加入高级Node交流群
今天给大家推荐这款拖拽组件VueDraggablePlus，试了一下非常不错，据说还被尤雨溪推荐过，咱们国人自己开发的，中国人不骗🇨🇳人，我就再来推荐一遍吧。
背后的故事
提到拖拽功能的实现，大家首先想到的几乎都是大名鼎鼎的Sortablejs。
和大家一样，Sortablejs也是我开发时的首选， 由于项目使用的是 Vue3，选择了Sortablejs官方封装的 vue.draggable.next
但是在使用过程中发现很多问题，开发过程并不顺利，其中一个问题和这个网友遇到的一样，使用socket.io更新列表时，总是报这个错误：
找解决方案过程中，发现这个库最近一次更新已经是3年前了：
看到issue回复中，都在推荐VueDraggablePlus这个库， 纠结再三还是放弃了Sortablejs官方封装支持vue的库。
关于 VueDraggablePlus
VueDraggablePlus 是一个专为 Vue 打造的拖拽排序模块，基于 Sortablejs 封装，支持 Vue3 或 Vue 2.7+。之前，Vue 作者尤雨溪还在社交媒体上推荐了这款组件。
解决痛点
在 Sortablejs 官方以往的 Vue 组件中，都是通过使用组件作为列表的直接子元素来实现拖拽列表，当我们使用一些组件库时，如果组件库中没有提供列表根元素的插槽，我们很难实现拖拽列表，vue-draggable-plus 完美解决了这个问题，它可以让你在任何元素上使用拖拽列表，我们可以使用指定元素的选择器，来获取到列表根元素，然后将列表根元素作为 Sortablejs 的 container，
技术特性
-
功能强大：全面继承 Sortable.js拖拽排序库的所有功能； -
Vue 生态支持好：兼容 Vue3 和 Vue2； -
实用灵活：支持组件、指令、函数式调用，我们喜欢那种编程方式都没问题； -
TS 支持：这个库本身就是用 TypeScript编写，有完整的 TS 文档； -
数据绑定：支持 v-model双向绑定，不需要单独维护排序数据； -
支持自定义容器：可以自定某个容器作为拖拽容器，比 Sortable.js更灵活。
上面提到了，vue-draggable-plus提供三种方式：组件使用方式、hooks使用方式和指令使用方式。下面都给大家介绍一下具体如何使用。
使用
安装
首先安装依赖
npm install vue-draggable-plus
// 或者
yarn add vue-draggable-plus
首先导入vue-draggable-plus组件：
import { VueDraggable } from 'vue-draggable-plus'
组件使用方式
<template>
<div class="flex w-full">
<VueDraggable
ref="el"
v-model="list"
:animation="150"
ghostClass="ghost"
class="flex w-full flex-col gap-2 p-4 h-300px"
>
<div
v-for="item in list"
:key="item.id"
class="cursor-move flex justify-between h-30"
>
<span>{{ item.id }}</span>
<span>{{ item.name }}</span>
</div>
</VueDraggable>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const list = ref([
{
name: '风险编号',
id: "riskNumber"
},
{
name: '风险点等级',
id: "rishLevel"
},
{
name: '控制目标',
id: "control target"
},
{
name: '影响程度',
id: "degree of influnce"
}
])
const el = ref<UseDraggableReturn>()
</script>
<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>
函数使用
多列表之间拖拽排序,可以通过设置相同的group属性来实现：
<template>
<div class="flex gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded">
<section ref="el1" class="w-[50%]">
<div
v-for="item in list1"
:key="item.id"
class="flex justify-between h-30 bg-gray-500/5 rounded p-3 cursor-move"
>
<span>{{ item.name }}</span>
</div>
</section>
<section ref="el2" class="w-[50%]">
<div
v-for="item in list2"
:key="item.id"
class="flex justify-between h-30 bg-gray-500/5 rounded p-3 cursor-move"
>
<span>{{ item.name }}</span>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { type UseDraggableReturn, VueDraggable } from "vue-draggable-plus";
import { useDraggable } from "vue-draggable-plus";
const list1 = ref([
{
name: "风险编号",
id: "riskNumber",
},
{
name: "风险点等级",
id: "rishLevel",
},
{
name: "控制目标",
id: "control target",
},
{
name: "影响程度",
id: "degree of influnce",
},
]);
const list2 = ref([
{
name: "曝光量",
id: "open",
},
{
name: "展示数",
id: "show",
},
{
name: "点击数",
id: "click",
},
{
name: "转化数",
id: "buy",
},
]);
const el1 = ref();
const el2 = ref();
useDraggable(el1, list1, {
animation: 150,
ghostClass: "ghost",
group: "number",
});
useDraggable(el2, list2, {
animation: 150,
ghostClass: "ghost",
group: "number",
});
</script>
<style scoped>
.ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>
指令使用方式
我们可以将表格的 thead 指定为目标容器，实现表格列拖拽
<template>
<table class="table table-striped">
<thead class="thead-dark">
<tr v-draggable="headers">
<th class="cursor-move" v-for="header in headers" :key="header.value">
{{ header.text }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.name">
<td v-for="header in headers" :key="header">
{{ item[header.value] }}
</td>
</tr>
</tbody>
</table>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { vDraggable } from "vue-draggable-plus";
const headers = ref([
{
text: "序号",
value: "id",
},
{
text: "日期",
value: "date",
},
{
text: "展示量",
value: "show",
},
]);
const list = ref([
{
date: "2023-10-10",
show: 17800,
id: 1,
},
{
date: "2023-10-11",
show: 56231,
id: 2,
},
{
date: "2023-10-12",
show: 763230,
id: 3,
},
{
date: "2023-10-13",
show: 21232,
id: 4,
},
]);
</script>
<style scoped>
tr {
height: 48px;
background: #fafafa;
text-align: center;
}
tr td,
tr th {
min-width: 60px;
}
tr:nth-child(2n) {
background-color: #f1f6ff;
}
.table {
width: 100%;
}
</style>
还有更多的使用方式，可以查看官方文档：https://alfred-skyblue.github.io/vue-draggable-plus/
最后
Node 社群
我组建了一个氛围特别好的 Node.js 社群，里面有很多 Node.js小伙伴，如果你对Node.js学习感兴趣的话（后续有计划也可以），我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下