当前位置: 首页 > news >正文

react拖曳组件react-dnd的简单封装使用

分享原因

由于项目中需要使用拖曳组件(需求:全局,跨组件,跨数据),我选择了react-dnd

概念

React DnD 是一组 React 高阶组件,我们在使用的时候只需要将目标元素进行包裹,就可以实现目标元素具有拖动或接受拖动的功能。它将整个拖动的事件完整的描述了出来,这使得我们在使用的过程变得简单易用和扩展上有了无限的可能,在处理复杂拖曳和丰富需求的时候强烈建议使用它。
官网 https://react-dnd.github.io/react-dnd/

基本

  • Item type:跟redux或其他组件一样,item用来描述拖动dom的数据对象,type用来标识一组可拖动和接收
  • Backend:用来表现dom拖动现象,我使用了HTML5Backend
  • Monitors:用来查询当前拖动状态(数据,dom,位置等),强大的收集功能
  • Connectors:用于Backend和组件状态之间的连接
  • hook:useDrag 将组件作为可拖动的来源注册到dnd useDrop 将组件作为可接收拖动来源注册到dnd

使用方法

导入
npm install react-dnd react-dnd-html5-backend
初始化

import { HTML5Backend } from 'react-dnd-html5-backend';<DndProvider backend={HTML5Backend}>....</>

组件参数type.ts

export type DragProps = {name: string; //名称标记type: string; //暂用于标记拖拽类型,接收者和发送者一致role: string; //data: any; //绑定的数据用于拖曳后操作数据content: JSX.Element; //绑定的元素onDragFinished: Function; //拖动结束回调.
};export type AcceptorProps = {name: string; //名称标记type: string; //暂用于标记拖拽类型,接收者和发送者一致role: string; //data: any; //绑定的数据用于拖曳后操作数据content: JSX.Element; //绑定的元素styleType: 'background' | 'border';// customStyle:{//     canDrop:string,//     isActive:string// }onHover: Function; //移入区域.
};

组件MyDrag.ts

import { useDrag, useDrop } from 'react-dnd';
import { DragProps, AcceptorProps } from './type';
export const Dragger = function Dragger(option: DragProps) {const { name, data, type, onDragFinished } = option;const [{ isDragging }, drag] = useDrag(() => ({type: type,item: { name: name, data: data },end: (item, monitor, ...arg) => {console.log(arg);const dropResult = monitor.getDropResult();if (item && dropResult) {console.log('source:', item);console.log('target:', dropResult);}if (onDragFinished) {onDragFinished(item, dropResult);}},collect: (monitor) => ({isDragging: monitor.isDragging(),handlerId: monitor.getHandlerId(),}),}));const opacity = isDragging ? 0.4 : 1;return (<divref={drag}role={option.role}style={{ opacity }}data-id={`${option.name}`}>{option.content}</div>);
};
export const Acceptor = (option: AcceptorProps) => {const { name, data, type, styleType, onHover } = option;const [{ canDrop, isOver }, drop] = useDrop(() => ({accept: type,drop: () => option,hover: () => {if (onHover) {onHover();}},collect: (monitor) => ({isOver: monitor.isOver(),canDrop: monitor.canDrop(),}),}));const isActive = canDrop && isOver;let backgroundColor = '#222';let borderBottom = '0px solid rgba(31, 92, 206, 0)';if (isActive) {backgroundColor = 'rgba(64, 224, 208, 0.3)';borderBottom = '1px solid #26BD11';} else if (canDrop) {backgroundColor = 'rgba(100, 149, 277, 0.3)';borderBottom = '1px solid #2063AF';}return (<divref={drop}role={'Acceptor'}style={styleType === 'background'? { backgroundColor }: { borderBottom }}>{option.content}</div>);
};
//同一list之间拖动
export const dragList = (list: Array<any>,crtIndex: number,willIndex: number,
) => {let targetItem = list[crtIndex];let delIndex = crtIndex < willIndex ? crtIndex : crtIndex + 1;list.splice(willIndex, 0, targetItem);list.splice(delIndex, 1);return list;
};
//来自不同list之间拖动,1.删除原来  2不删除原来
export const dragToList = (list: Array<any>,targetList: Array<any>,crtIndex: number,willIndex: number,del: 1 | 2,
) => {let targetItem = list[crtIndex];targetList.splice(willIndex, 0, targetItem);if (del === 1) {list.splice(crtIndex, 1);}return { list, targetList };
};

具体使用

import { Dragger, Acceptor, dragList } from '@/components/Drag';
//同列表之间拖曳handleDrag(crt: number, target: number) {conslog.log(dragList(newPanels, crt, target);)}renderDrag(item: ItemProps, children) {<Acceptorkey={item.type}name={item.title}data={item}type="xxx"role="xxxAccept"onHover={() => {}}content={<Draggername={item.title}data={item}type="xxx"role="xxxDrag"content={children}onDragFinished={(source: any, target: any) => {console.log(source, target, '回调');if (target) {this.handleDrag(source.data.sort,target.data.sort,);}}}/>}styleType="border"/>}


喜欢的朋友记得点赞、收藏、关注哦!!!

相关文章:

react拖曳组件react-dnd的简单封装使用

分享原因 由于项目中需要使用拖曳组件(需求:全局&#xff0c;跨组件&#xff0c;跨数据)&#xff0c;我选择了react-dnd 概念 React DnD 是一组 React 高阶组件&#xff0c;我们在使用的时候只需要将目标元素进行包裹&#xff0c;就可以实现目标元素具有拖动或接受拖动的功能。…...

Excel中COUNTIF用法解析

COUNTIF 是 Excel 中一个非常实用的函数&#xff0c;用于统计满足某个条件的单元格数量。它的基本语法如下&#xff1a; 基本语法 COUNTIF(范围, 条件) 范围&#xff1a;需要统计的单元格区域&#xff0c;例如 A1:A10 或整列 A:A。 条件&#xff1a;用于判断哪些单元格需要被…...

Uniapp 页面返回不刷新?两种方法防止 onShow 触发多次请求!

目录 前言1. 变量&#xff08;不生效&#xff09;2. 延迟&#xff08;生效&#xff09; 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 在 Uniapp 中&#xff0c;使用 onShow() 钩子来监听页面显示&#xff0…...

《论数据湖技术及其应用》审题技巧 - 系统架构设计师

论题写作框架 一、考点概述 “数据湖技术及其应用”这一论题主要考察的是软件测试工程师对于前沿数据存储与处理技术的理解及其在软件开发项目中的实际应用能力。具体而言&#xff0c;该论题涵盖了以下几个核心考点&#xff1a; 软件项目管理与开发经验 &#xff1a;要求考生…...

C++蓝桥杯基础篇(八)

片头 嗨~小伙伴们&#xff0c;大家好&#xff01;今天我们一起来学习C蓝桥杯基础篇&#xff08;八&#xff09;&#xff0c;练习相关字符串的习题&#xff0c;准备好了吗&#xff1f;Are you ready? Lets go! 第1题 字符串中的数字个数 这道题&#xff0c;我们用字符数组或者…...

AI 实战 - pytorch框架基于retinaface实现face检测

pytorch框架基于retinaface实现face检测 简介模型结构MobileNet-0.25SSH结构Head结构 Anchor编解码 环境开发环境 数据简介 训练测试参考 简介 RetinaFace是在RetinaNet基础上引申出来的人脸检测框架&#xff0c;所以大致结构和RetinaNet非常像。 主要改进&#xff1a;1.Mobi…...

如何在PHP中实现API版本管理:保持向后兼容性

如何在PHP中实现API版本管理&#xff1a;保持向后兼容性 在现代Web开发中&#xff0c;API&#xff08;应用程序编程接口&#xff09;是连接前端和后端的关键桥梁。随着业务需求的不断变化&#xff0c;API的版本管理变得尤为重要。良好的版本管理策略不仅能够确保新功能的顺利引…...

Docker Compose企业示例

利用容器编排完成haproxy和nginx负载均衡架构实施 1.mkdir docker.test 2.touch haproxy.yml 3.mkdir /var/lib/docker/volumes/conf 4.dnf install haproxy -y --downloadonly --downloaddir/xixi&#xff1a;下载内容到/xixi目录下 5. rpm2cpio haproxy-2.4.22-4.el9.x8…...

TMS320F28P550SJ9学习笔记6:SCI所有寄存器__结构体寄存器方式配置 SCI通信初始化__库函数发送测试

继续学习如何使用结构体寄存器的方式配置这款单片机的外设&#xff0c;这里配置SCI通信的初始化 但SCI gpio 的初始化还是调用的库函数比较方便&#xff0c;它的发送部分页调用了库函数 有关收发方面的逻辑&#xff0c;我会在之后重新自己写一次 文章提供测试代码讲解、完整…...

详细探索如何用脚本实现M小ySQL一键安装与配置,提升运维效率!

以下是基于脚本实现MySQL一键安装与配置的详细方案&#xff0c;涵盖Linux主流系统&#xff08;CentOS/Ubuntu&#xff09;及Windows环境&#xff0c;结合自动化部署与高可用性扩展&#xff0c;旨在提升运维效率&#xff1a; 一、Linux系统&#xff08;CentOS 7.x&#xff09;一…...

无人机推流/RTMP视频推拉流:EasyDSS无法卸载软件的原因及解决方法

视频推拉流/直播点播EasyDSS平台支持音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务&#xff0c;在应用场景中可实现视频直播、点播、转码、管理、录像、检索、时移回看等。此外&#xff0c;平台还支持用户自行上传视频文件&#xff0c;也可将上传的点播…...

增删改查 数据下载 一键编辑 删除

index 首页 <template><div class"box"><el-card :style"{ width: treeButton ? 19.5% : 35px, position: relative, transition: 1s }"><el-tree v-if"treeButton" :data"treeData" :props"defaultPro…...

【Go学习实战】03-2-博客查询及登录

【Go学习实战】03-2-博客查询及登录 读取数据库数据初始化数据库首页真实数据分类查询分类查询测试 文章查询文章查询测试 分类文章列表测试 登录功能登录页面登录接口获取json参数登录失败测试 md5加密jwt工具 登录成功测试 文章详情测试 读取数据库数据 因为我们之前的数据都…...

回溯算法(C/C++)

目录 一、组合问题 组合 组合剪枝 组合总和 III​编辑 组合总和​编辑 组合总和 II 电话号码的字母组合​编辑 二、分割问题 分割回文串 复原 IP 地址 三、集合问题 子集 子集 II 非递减子序列 四、排列问题 全排列 全排列 II 五、棋盘问题 N 皇后 课程&#x…...

物联网智慧农业一体化解决方案-可继续扩展更多使用场景

在智慧农业中,从种子、施肥、灌溉、锄地、农具管理、日常照料到蔬菜档案管理,以及与客户、供应商、市场的对接,可以通过物联网(IoT)、大数据、人工智能(AI)、区块链和云计算等技术,构建一个从生产到销售的全流程数字化、智能化农业生态系统。以下是实现方案和技术路径的…...

Jackson 详解

目录 前言 Jackson 是 Java 生态中最流行的 JSON 处理库之一&#xff0c;广泛应用于 RESTful API、数据存储和传输等场景。它提供了高效、灵活的 JSON 序列化和反序列化功能&#xff0c;支持注解、模块化设计和多种数据格式&#xff08;如 XML、YAML&#xff09;。本文将详细介…...

游戏引擎学习第143天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾并规划今天的内容 目前&#xff0c;我们正在进行声音混合的开发。我们已经写好了声音混合器&#xff0c;并且已经实现了一些功能&#xff0c;比如声音流播放和音量插值。过去一周我们做了很多工作&#xff0c;进展非常快。不…...

SLAM评估工具安装及使用EVO(Ubuntu20.04安装evo)--缺少 onnx 库还有Pandas 版本不兼容解决

介绍一下我的是ubuntu20.04.机载电脑是orinnx&#xff0c;通过源码烧写的系统。 首先打开终端&#xff0c;输入 pip install evo --upgrade --no-binary evo 安装过程中出现如下问题 缺少 onnx 库还有Pandas 版本不兼容&#xff0c; ONNX&#xff08;Open Neural Network E…...

Nginx解决前端跨域问题

1. 理解 CORS 和同源策略 1.1 同源策略 同源策略是一种浏览器安全机制&#xff0c;用于阻止不同源&#xff08;不同域名、协议或端口&#xff09;的 Web 应用相互访问数据。它确保了 Web 应用的隔离性&#xff0c;防止恶意网站访问用户数据或执行不安全的操作。 同源策略下&…...

ReferenceError: assignment to undeclared variable xxx

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 &#x1f35a; 蓝桥云课签约作者、…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

多模态图像修复系统:基于深度学习的图片修复实现

多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...