拖拽不够自由?Vue3 DnD它来了!

前言

众所周知,在React中有一款非常强大的拖拽库,叫React DnD,而Vue中,大部分都是类似于vue.draggable等拖拽排序的库,然而它并不能满足我们所有的需求,特别是应对一些自由拖拽或混合拖拽的场景(例如:低代码),它是很难做到的,所以vue3-dnd它来了!

React DnD

React DnD 是 Redux 核心作者 Dan Abramov 创造的一组 React 工具库,可以帮助您构建复杂的拖放接口,同时保持组件的解耦性。 React DnD 并没有提供一个排序或拖拽的组件,相反,它为您提供了所需的工具。

Vue3 DnD

vue3-dnd 是基于React DnD的核心程序实现的一组Vue composition-api,它提供了尽量与React DnD保持一致的api,便于我们去构建一个复杂、自由的拖拽功能。

安装

越来越多的人使用pnpm,所以我们也推荐你使用pnpm来进行安装,当然你也可以使用其它任意工具进行安装

pnpm install vue3-dnd react-dnd-html5-backend
# or
npm install vue3-dnd react-dnd-html5-backend

react-dnd-html5-backend 是一个React DnD 的插件,它提供了一个HTML5的拖放支持;你也可以使用react-dnd-touch-backend 提供移动端拖放支持。

得益于React DnD的优秀设计,我们可以直接使用它提供的backend,或者实现一个自己的backend,还可以使用 react-dnd-test-backend 来测试你的拖拽组件。

概念

React DnD创造了一些新的概念,如果第一次使用它的话,我们可能要提前了解它。

当然,你也可以先跳过这一部分,在你真正使用的时候再去了解它

项目(Items) 和 类型(Types)

React DnD 使用数据而不是视图作为拖拽实施。当您在屏幕上拖动某些东西时,我们不会说正在拖动组件或 DOM 节点。相反,我们说正在拖动某种类型项目

监视器(Monitors)

拖放本质上是有状态的。拖动操作正在进行中,或者没有。要么有当前类型和当前项目,要么没有。这种状态必须存在于某个地方。

对于每个需要跟踪拖放状态的组件,您可以定义一个收集函数,从监视器中提取状态;例如:

const [collect, drop] = useDrop({accept: 'Cell',collect: monitor => ({canDrop: monitor.canDrop(),hovered: monitor.isOver(),}),
})

连接器(Connectors)

连接器允许您将DOM元素连接到backend中预定义角色之一(拖动源drag、拖动预览dragPreview或放置目标drop)。

我们的hooks中提供了连接器函数,让我们看看如何使用它来指定放置目标:

<script setup lang="ts">
import { useDrop } from 'vue3-dnd'const [, drop] = useDrop({})
</script><template><div :ref="drop"></div>
</template>

拖拽源(Drag Sources) 和 拖放目标 (Drop Targets)

我们使用拖拽源dragSource来表示拖拽的元素

我们使用拖放目标dropTarget来表示目标接收拖拽元素

使用

开始

在使用Vue3 DnD的时候,我们一般需要使用DndProvider组件,如果没有特殊情况,我们可以将它放在App.vue里边

<script setup lang="ts">
import { DndProvider } from 'vue3-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'
</script><template><DndProvider :backend="HTML5Backend"><!-- 你的拖拽程序 --></DndProvider>
</template>

拖拽组件

我们可以使用useDrag这个函数,来构建一个拖拽组件。

<script setup lang="ts">
import { useDrag } from 'vue3-dnd'const [collectedProps, dragSource, dragPreview] = useDrag({type: 'BOX',item: { id: '1' },collect: (monitor) => ({ isDragging: monitor.isDragging() })
})
</script><template><div v-if="collectedProps.isDragging" :ref="dragPreview">dragPreview</div><div v-else :ref="dragSource">dragSource</div>
</template>

可以看到,简单的几行代码,我们构建了一个拖拽的元素,它平时展示dragSource,而一旦开始拖拽,它就会展示dragPreview

拖放目标

我们可以使用useDrop这个函数,来构建一个拖放组件。

<script setup lang="ts">
import { useDrop } from 'vue3-dnd'const [, drop] = useDrop({accept: ['BOX']
})
</script><template><div :ref="drop">Drop Target</div>
</template>

上边的代码,帮助我们构建了一个拖放组件,它只会对typeBOX的拖拽元素产生反应。

拖动层

我们都知道,在拖拽的过程中,浏览器会给我们提供一个元素的快照,但是我们如果想自己操作这个快照该怎么办呢?这个时候就可以使用useDragLayer这个函数

<script setup lang="ts">
import { useDragLayer } from 'vue3-dnd'const collectedProps = useDragLayer(monitor => ({ item: monitor.getItem(),}))
</script><template><div>dragLayer</div>
</template>

上边的例子,就会让你在拖拽的过程中,展示一个dragLayer元素,一般我们会结合useDragdragPreview连接器进行使用。

效果

俗话说的好,有图有真相,没有实际的效果,怎么能知道它的强大呢?

自由拖拽+自定义拖动层

拖拽排序

嵌套的拖拽元素

当然,它还可以实现更多,这里就不再一一展示了。

Vue2

别看它叫vue3-dnd,它同样也可以支持vue2,在vue2中只需要稍微更改一下使用方式即可。

  1. 在vue2中使用,需要先安装@vue/composition-api
  2. 由于Vue2不支持dom ref函数,所以我们必须额外定义一个ref,用于承载dom节点,并将这个ref传递给我们的connect函数。

<template><divref="element"role="Box":data-testid="`box-${name}`">{{ name }}</div>
</template><script lang="ts" setup>
import { useDrag } from 'vue3-dnd'
import { ref } from '@vue/composition-api'interface DropResult {name: string
}const props = defineProps<{ name: string }>()const [collect, drag, dragPreview] = useDrag(() => ({type: 'BOX',item: { name: props.name },
}))const element = ref()
drag(element)
// 可选的,默认与drag一致
dragPreview(element)
// 如果是useDrop,也是一样的
// drop(element)
</script>

结语

为什么不叫vue dnd呢?当然是因为有人已经提前占用了这个包名~

同时我们还希望继续在vue3-dnd的上层提供一些易用性更高的组件,欢迎大家一起参与,敬请期待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/627383.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenHarmony之HDF驱动开发流程指导

开发指导 场景介绍 关于驱动的开发我们主要目的是实现驱动代码的编写&#xff0c;但是驱动开发过程中需要服务管理、消息机制管理&#xff0c;才能使驱动在代码编译过程中进行加载。以下开发步骤中介绍了驱动开发、驱动消息机制管理开发、驱动服务管理开发的步骤。 驱动开发…

henauOJ 1104: 单词数

题目描述 lily的好朋友xiaoou333最近很空&#xff0c;他想了一件没有什么意义的事情&#xff0c;就是统计一篇文章的单词总数。下面你的任务是帮助xiaoou333解决这个问题。 输入 有多组数据&#xff0c;每组一行&#xff0c;每组就是一篇小文章。每篇小文章都是由小写字母和…

spring boot mybatis-plus dynamic-datasource 配置文件 相关依赖环境配置

spring boot mybatis-plus dynamic-datasource 配置文件 相关依赖环境配置 ##yaml配置 server:port: 8866servlet:context-path: /yymtomcat:max-threads: 300connection-timeout: 57000max-connections: 500connection-timeout: 57000 spring:datasource:dynamic:primary: m…

二叉树遍历C++

假设二叉树上各结点的权值互不相同且都为正整数。 给定二叉树的后序遍历和中序遍历&#xff0c;请你输出二叉树的前序遍历的最后一个数字。 输入格式 第一行包含整数 N&#xff0c;表示二叉树结点总数。 第二行给出二叉树的后序遍历序列。 第三行给出二叉树的中序遍历序列。 …

【IPC通信--共享内存mmap】

共享内存是一种高效的进程间通信方式&#xff0c;可以在多个进程之间共享数据&#xff0c;提高程序的效率。mmap是一种常用的实现共享内存的机制&#xff0c;它可以将一个文件或者设备映射到内存中&#xff0c;使得多个进程可以通过访问这块内存来实现数据共享。 一、共享内存…

SpringBoot 源码解析4:refresh 方法解析

SpringBoot 源码解析4&#xff1a;refresh 方法解析 1. refresh 方法解析2. 准备刷新 AbstractApplicationContext#prepareRefresh3. 获取bean工厂 AbstractApplicationContext#obtainFreshBeanFactory4. 准备bean工厂 AbstractApplicationContext#prepareBeanFactory5. Servle…

Java学习,一文掌握Java之SpringBoot框架学习文集(6)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

1、docker常用操作

docker常用操作 1、启动docker2.容器2.1创建容器2.2查看容器2.3启动容器 3、镜像3.1查看镜像3.2创建镜像 4、在宿主机和容器之间交换⽂件5、docker 容器之间通信5.1查看网络5.2创建网络5.3容器连接到网络5.4网络端口映射5.5Docker的跨主机网络访问 1、启动docker 参考&#xf…

Linux 修改文件名称的三种方法

修改文件名称是 Linux 系统中常见的操作之一。有三种方法可以修改文件名称&#xff1a; 1. 使用 mv 命令 mv 命令是用于移动或重命名文件的命令。要使用 mv 命令重命名文件&#xff0c;请使用以下语法&#xff1a; mv old_file_name new_file_name 例如&#xff0c;要将文件…

阿里国际站运营每天具体做什么工作?附运营方法!

相信很多刚接触阿里国际站的运营人员都会迷茫&#xff0c;没有思路还容易产生焦虑&#xff0c;主要就是担心运营没效果&#xff01;今天大白就带着大家一起揭秘阿里国际站运营每天必做的事情都有哪些&#xff0c;带你更好地了解阿里国际站应该如何运营&#xff01; 阿里国际站运…

5.【CPP】内存管理(text段data段bss段||nwedelete底层实现||源码)

一.内存管理 1.如图 2.heap下面的空间 应用程序加载到内存中由操作系统完成对bss,data,text,stack加载&#xff0c;并在内存分配空间。在编译阶段已经确定分配了多少空间&#xff0c;属于静态分配。 而malloc等在程序运行时在堆上开辟空间则属于动态分配&#xff0c;需要手动f…

k8s---配置资源管理

内容预知 目录 内容预知 secret资源配置 secert的几种模式 pod如何来引用secret 陈述式创建secret 声明式base64编码配置secret 将secret用vlumes的方式挂载到pod中 传参的方式将环境变量导入pod 如何通过secret加密方式获取仓库密码 configmap的资源配置 陈述式创建…

ubuntu 22 搭建git服务

第一步&#xff0c;安装git&#xff1a; sudo apt-get install git 创建用户信息 git config --global user.name soft 第二步&#xff0c;创建一个git用户&#xff0c;用来运行git服务&#xff1a; sudo adduser git 创建git仓库的存储目录、更改文件目录属主为代码仓库…

2.3数据链路层02

2.3 数据链路层 2.3.5 以太网 1、以太网概念 以太网是一种计算机局域网技术。IEEE&#xff08;电气与电子工程师协会&#xff1a;Institute of Electrical and Electronics Engineers&#xff09;组织的IEEE802.3标准制定了以太网的技术标准&#xff0c;它规定了包括物理层的…

Gartner发布CPS安全2024年预测:安全形势动荡的四大向量

随着威胁形势、自动化和人工智能采用的步伐以及供应商形势不断快速发展&#xff0c;我们为安全和风险管理领导者提供了四项预测&#xff0c;以规划 2024 年及以后 CPS 安全的未来发展方向。 主要发现 随着人工智能的采用加速增加网络物理系统&#xff08; CPS&#xff09;的“智…

openssl3.2 - 官方demo学习 - cms - cms_comp.c

文章目录 openssl3.2 - 官方demo学习 - cms - cms_comp.c概述笔记END openssl3.2 - 官方demo学习 - cms - cms_comp.c 概述 CMS is Cryptographic Message Syntax (CMS) standard 用CMS操作, 将明文压缩 默认编译出来的openssl3.2没有zlib库, 需要添加zlib特性[openssl3.2 - …

JAVA基础---内部类详解

文章目录 1. 内部类概念2. 内部类的分类2.1 内部类2.1.1 实例内部类2.1.2 静态内部类2.2 局部内部类2.3 匿名内部类 1. 内部类概念 当一个事物的内部&#xff0c;还有一个部分需要一个完整的结构进行描述&#xff0c;而这个内部的完整的结构又只为外部事物提供服务&#xff0c…

MPLS基础架构

目录 一、MPLS多协议标签交换概述 1、MPLS是什么 2、MPLS-VPN 3、MPLS起源 &#xff08;1&#xff09;、MPLS解决的问题 MPLS解决了三层转发短板问题。 &#xff08;2&#xff09;、交换机转发流程 &#xff08;3&#xff09;、路由器转发流程 &#xff08;4&#xff09;、交换…

【程序员的自我修养11】栈与函数调用过程

绪论 大家好&#xff0c;欢迎来到【程序员的自我修养】专栏。正如其专栏名&#xff0c;本专栏主要分享学习《程序员的自我修养——链接、装载与库》的知识点以及结合自己的工作经验以及思考。编译原理相关知识本身就比较有难度&#xff0c;我会尽自己最大的努力&#xff0c;争…

gradle版本中-bin与-all区别

打开android studio下载的gradle文件&#xff0c;发现-all比-bin多了一个docs文件夹和一个src文件夹。-bin是编译后的二进制发布版&#xff0c;-all还包含了源码和文档&#xff0c;比-bin大了几十兆&#xff0c;两者其余没有区别。 android开发只关注gradle功能不关注实现的情况…