强烈推荐一款好用到爆的可视化拖拽库

程序员成长指北

共 10768字,需浏览 22分钟

 ·

2024-04-28 09:18

大厂技术  高级前端  Node进阶

点击上方 程序员成长指北,关注公众号

回复1,加入高级Node交流群


今天给大家推荐这款拖拽组件VueDraggablePlus,试了一下非常不错,据说还被尤雨溪推荐过,咱们国人自己开发的,中国人不骗🇨🇳人,我就再来推荐一遍吧。

背后的故事

提到拖拽功能的实现,大家首先想到的几乎都是大名鼎鼎的Sortablejs

和大家一样,Sortablejs也是我开发时的首选, 由于项目使用的是 Vue3,选择了Sortablejs官方封装的 vue.draggable.next

image.png

但是在使用过程中发现很多问题,开发过程并不顺利,其中一个问题和这个网友遇到的一样,使用socket.io更新列表时,总是报这个错误:

image.png

找解决方案过程中,发现这个库最近一次更新已经是3年前了:

image.png

看到issue回复中,都在推荐VueDraggablePlus这个库, 纠结再三还是放弃了Sortablejs官方封装支持vue的库。

image.png
image.png

关于 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 {
    opacity0.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, {
  animation150,
  ghostClass"ghost",
  group"number",
});
useDraggable(el2, list2, {
  animation150,
  ghostClass"ghost",
  group"number",
});
</script>
  
<style scoped>
.ghost {
  opacity0.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",
    show17800,
    id1,
  },
  {
    date"2023-10-11",
    show56231,
    id2,
  },
  {
    date"2023-10-12",
    show763230,
    id3,
  },
  {
    date"2023-10-13",
    show21232,
    id4,
  },
]);
</script>
<style scoped>
tr {
  height48px;
  background#fafafa;
  text-align: center;
}
tr td,
tr th {
  min-width60px;
}
tr:nth-child(2n) {
  background-color#f1f6ff;
}
.table {
  width100%;
}
</style>

还有更多的使用方式,可以查看官方文档:https://alfred-skyblue.github.io/vue-draggable-plus/

最后

Node 社群

    


我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。

   “分享、点赞在看” 支持一下

浏览 284
2点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
2点赞
评论
收藏
分享

手机扫一扫分享

分享
举报