强烈推荐一款好用到爆的可视化拖拽库
共 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」即可。
“分享、点赞、在看” 支持一下