React中使用dnd-kit实现拖拽排序
使用dnd-kit实现拖拽排序
效果展示
实现源码
安装依赖
dad-kit github地址
yarn add @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities @dnd-kit/modifiers
这几个包的作用
- @dnd-kit/core:核心库,提供基本的拖拽功能。
- @dnd-kit/sortable:扩展库,提供排序功能和工具。
- @dnd-kit/modifiers:修饰库,提供拖拽行为的限制和修饰功能。
- @dnd-kit/utilities:工具库,提供 CSS 和实用工具函数。上述演示的平滑移动的样式就是来源于这个包。
实现代码
最外层使用 DndContext 组件,然后内层使用 SortableContext,并且传入列表信息,SortableContext 内层正常显示循环出来的DOM元素
import React, { ChangeEvent, FC, useState } from 'react'
import useGetComponentInfo from '../../hooks/useGetComponentInfo'
import { Button, Flex, Input, message, Space } from 'antd'
import style from './Layerlib.module.scss'
import { EyeInvisibleOutlined, LockOutlined, DragOutlined } from '@ant-design/icons'
import classNames from 'classnames'
import { useDispatch } from 'react-redux'
import {changeSelectedId,changeComponentTitle,componentInfoType,hiddenComponent,toogleLock,reorderComponents
} from '../../store/componentsReducer'import type { DragEndEvent, DragMoveEvent } from '@dnd-kit/core'
import { DndContext } from '@dnd-kit/core'
import { arrayMove, SortableContext, rectSortingStrategy, useSortable } from '@dnd-kit/sortable'
import { restrictToParentElement } from '@dnd-kit/modifiers'
import { CSS } from '@dnd-kit/utilities'export default function Layerlib() {// 记录当前正在修改的idconst [changingId, setChangingId] = useState('')const { componentsList, selectedId } = useGetComponentInfo()const dispatch = useDispatch()// 点击组件function handleClick(component: componentInfoType) {const { _id, isHidden } = componentif (isHidden) {message.error('不能选中被隐藏的组件')return}if (_id !== selectedId) {dispatch(changeSelectedId(_id))setChangingId('')} else {setChangingId(_id)}}// 修改组件标题function handleChangeTitle(event: ChangeEvent<HTMLInputElement>, id: string) {const value = event.target.value.trim()if (!value) returndispatch(changeComponentTitle({ _id: id, title: value }))}// 切换组件隐藏和显示function handleToggleHidden(component: componentInfoType) {const { _id, isHidden } = componentdispatch(hiddenComponent({ _id, isHidden: !isHidden }))}// 切换锁定function handleToggleLock(component: componentInfoType) {const { _id } = componentdispatch(toogleLock({ _id }))}// 拖动排序const getMoveIndex = (array: componentInfoType[], dragItem: DragMoveEvent) => {const { active, over } = dragItemconst activeIndex = array.findIndex(item => item._id === active.id)const overIndex = array.findIndex(item => item._id === over?.id)// 处理未找到索引的情况return {activeIndex: activeIndex !== -1 ? activeIndex : 0,overIndex: overIndex !== -1 ? overIndex : activeIndex}}// 拖动结束const dragEndEvent = (dragItem: DragEndEvent) => {const { active, over } = dragItemif (!active || !over) return // 处理边界情况const moveDataList = [...componentsList]const { activeIndex, overIndex } = getMoveIndex(moveDataList, dragItem)if (activeIndex !== overIndex) {const newDataList = arrayMove(moveDataList, activeIndex, overIndex)// 关键:更新一下最新的组件数据dispatch(reorderComponents(newDataList))}}type DraggableItemProps = {component: componentInfoType}// 拖拽的子组件const DraggableItem: FC<DraggableItemProps> = ({ component }) => {const { _id, isLock, isHidden } = componentconst { setNodeRef, attributes, listeners, transform, transition } = useSortable({id: _id,transition: {duration: 500,easing: 'cubic-bezier(0.25, 1, 0.5, 1)'}})const styles = {transform: CSS.Transform.toString(transform),transition}// 动态样式const componentClass = classNames({[style.check]: _id === selectedId,[style.hidden]: isHidden})return (<Flexkey={_id}align="center"justify="space-between"gap={10}className={style.layerItem}ref={setNodeRef}style={styles}><div className={componentClass} style={{ flex: 1 }} onClick={() => handleClick(component)}>{changingId === _id ? (<Inputvalue={component.title}autoFocusonChange={event => handleChangeTitle(event, component._id)}onPressEnter={() => setChangingId('')}onBlur={() => setChangingId('')}/>) : (component.title)}</div><Space>{/* 拖动排序 */}<Buttonsize="small"shape="circle"icon={<DragOutlined />}type="text"style={{cursor: 'move'}}{...attributes}{...listeners}/><Buttonsize="small"shape="circle"icon={<EyeInvisibleOutlined />}type={isHidden ? 'primary' : 'text'}onClick={() => handleToggleHidden(component)}/><Buttonsize="small"shape="circle"icon={<LockOutlined />}type={isLock ? 'primary' : 'text'}onClick={() => handleToggleLock(component)}/></Space></Flex>)}return (<DndContext onDragEnd={dragEndEvent} modifiers={[restrictToParentElement]}><SortableContext items={componentsList.map(item => item._id)} strategy={rectSortingStrategy}><div className="drag-container">{componentsList.map(component => (<DraggableItem key={component._id} component={component} />))}</div></SortableContext></DndContext>)
}
代码解释
modifiers
标识符,传入一个标识符数组以限制在父组件进行拖曳的行为。我们代码中使用 restrictToParentElement,限制在父元素内的标识符,主要可选的一些标识符如下:
- restrictToParentElement:限制在父元素内。
- restrictToFirstScrollableAncestor:限制在第一个可滚动祖先元素。
- restrictToVerticalAxis:限制在垂直轴上。
- restrictToHorizontalAxis:限制在水平轴上。
- restrictToBoundingRect:限制在指定矩形区域内。
- snapCenterToCursor:使元素中心对齐到光标。
onDragEnd
顾名思义,就是用户鼠标松开后触发的拖曳事件的回调。触发时会自动传入类型为 DragEndEvent 的对象,我们可以从其中拿出 active 和 over 两个参数来具体处理拖曳事件。
active 包含 正在拖曳的元素的相关信息,over 包含最后鼠标松开时所覆盖到的元素的相关信息。
import { arrayMove } from '@dnd-kit/sortable'// 拖动排序
const getMoveIndex = (array: componentInfoType[], dragItem: DragMoveEvent) => {const { active, over } = dragItemconst activeIndex = array.findIndex(item => item._id === active.id)const overIndex = array.findIndex(item => item._id === over?.id)// 处理未找到索引的情况return {activeIndex: activeIndex !== -1 ? activeIndex : 0,overIndex: overIndex !== -1 ? overIndex : activeIndex}
}// 拖动结束
const dragEndEvent = (dragItem: DragEndEvent) => {const { active, over } = dragItemif (!active || !over) return // 处理边界情况const moveDataList = [...componentsList]const { activeIndex, overIndex } = getMoveIndex(moveDataList, dragItem)if (activeIndex !== overIndex) {const newDataList = arrayMove(moveDataList, activeIndex, overIndex)// 关键:更新一下最新的组件数据dispatch(reorderComponents(newDataList))}
}
我们的代码中,从 dragItem 中解构出 active, over 这两个变量,分别代表当前拖拽的组件数据和被覆盖的组件数据,然后通过 @dnd-kit/sortable 提供的 arrayMove 方法得到排序后的组件列表,接着使用dispatch更新Redux中的数据,实现页面展示最新排序的效果
相关文章:
React中使用dnd-kit实现拖拽排序
使用dnd-kit实现拖拽排序 效果展示 实现源码 安装依赖 dad-kit github地址 yarn add dnd-kit/core dnd-kit/sortable dnd-kit/utilities dnd-kit/modifiers这几个包的作用 dnd-kit/core:核心库,提供基本的拖拽功能。dnd-kit/sortable:扩…...
深度学习总结(3)
数据批量的概念 通常来说,深度学习中所有数据张量的第一个轴(也就是轴0,因为索引从0开始)都是样本轴[samples axis,有时也叫样本维度(samples dimension)]。深度学习模型不会一次性处理整个…...
Android Studio Narwhal | 2025.1.1新功能
Android Studio 中的 Gemini 支持多模式图像附件 现在,您可以在 Android Studio 中将图像直接附加到 Gemini 提示中。您可以即时获取复杂技术图表的洞察,或使用设计模型生成相应的代码框架。这种将视觉环境无缝集成到 AI 辅助工作流程中的设计方式&…...
XML语法指南——从入门到精通
1、引言 XML(可扩展标记语言)是一种用于存储和传输数据的标记语言,它被设计为具有自我描述性且易于理解。本文将全面介绍XML的语法规则,包括元素、属性、命名规则、转义字符等核心概念。 2、XML文档基本结构 一个完整的XML文档…...
利用高阶函数实现AOP
如大家所熟悉的,AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计、安全控制、异常处理等。 把这些功能抽离出来之后,再通过“动态织入”的方式掺…...
原生SSE实现AI智能问答+Vue3前端打字机流效果
实现流程: 1.用户点击按钮从右侧展开抽屉(drawer),打开模拟对话框 2.用户输入问题,点击提问按钮,创建一个SSE实例请求后端数据,由于SSE是单向流,所以每提一个问题都需要先把之前的实…...
windows11下pytorch(cpu)安装
先装anaconda 见最下方 Pytorch 官网:PyTorch 找到下图(不要求版本一样)(我的电脑是集显(有navdia的装gpu),装cpu) 查看已有环境列表 创建环境 conda create –n 虚拟环境名字(…...
C++【string类】(一)
string类 1.为什么要学string?2.标准库类型的string类2.1 string类的构造2.2string类的析构2.3读写string类2.4string类的赋值重载2.5string的遍历 1.为什么要学string? 在C语言中字符出串是以‘/0’结尾的一些字符的结合,为了操作方便&…...
yarn:error Error: certificate has expiredERR_OSSL_EVP_UNSUPPORTED解决
yarn:error Error: certificate has expired 报错 error Error: certificate has expiredat TLSSocket.onConnectSecure (node:_tls_wrap:1679:34)at TLSSocket.emit (node:events:519:28)at TLSSocket._finishInit (node:_tls_wrap:1078:8)at ssl.onhandshakedon…...
Git Cherry-pick:核心命令、实践详解
Git Cherry-pick:核心命令、实践详解 一、Cherry-pick 1. 简介 在多分支协作开发中,我们常常只想把某个分支上的单个或若干次提交,合并到另一个分支,而不需要合并整个分支。Git 提供的 cherry-pick 命令,正是为此而…...
ffmpeg播放音视频流程
文章目录 🎬 FFmpeg 解码播放流程概览(以音视频文件为例)1️⃣ 创建结构体2️⃣ 打开音视频文件3️⃣ 查找解码器并打开解码器4️⃣ 循环读取数据包(Packet)5️⃣ 解码成帧(Frame)6️⃣ 播放 / …...
OSPF的数据报文格式【复习篇】
OSPF协议是跨层封装的协议(跨四层封装),直接将应用层的数据封装在网络层协议之后,IP协议包中协议号字段对应的数值为89 OSPF的头部信息: 所有的数据共有的信息字段 字段名描述版本当前OSPF进程使用的版本(…...
Spark大数据分析与实战笔记(第四章 Spark SQL结构化数据文件处理-04)
文章目录 每日一句正能量第4章 Spark SQL结构化数据文件处理章节概要4.4 RDD转换DataFrame4.4.1 反射机制推断Schema4.4.2 编程方式定义Schema 每日一句正能量 一个人若想拥有聪明才智,便需要不断地学习积累。 第4章 Spark SQL结构化数据文件处理 章节概要 在很多情…...
设计模式 --- 状态模式
状态模式是一种行为型设计模式,允许对象在内部状态改变时动态改变其行为,使对象的行为看起来像是改变了。该模式通过将状态逻辑拆分为独立类,消除复杂的条件分支语句,提升代码的可维护性和扩展性。 状态模式的…...
将外网下载的 Docker 镜像拷贝到内网运行
将外网下载的 Docker 镜像拷贝到内网运行,可以通过以下步骤实现: 一、在有外网访问权限的机器上操作 下载镜像 使用docker pull命令下载所需的镜像。例如,如果你需要下载一个名为nginx的镜像,可以运行以下命令:docke…...
Seq2Seq - GRU补充讲解
nn.GRU 是 PyTorch 中实现门控循环单元(Gated Recurrent Unit, GRU)的模块。GRU 是一种循环神经网络(RNN)的变体,用于处理序列数据,能够更好地捕捉长距离依赖关系。 ⭐重点掌握输入输出部分输入张量&#…...
从0到1构建工具站 - day6 (在线编程工具-docker)
从0到1构建工具站 网页在线编程工具构建(php、go、python)搜集其他在线编程网站构建php8运行环境Dockerfiledocker-compose.yaml 构建python运行环境Dockerfiledocker-compose.yml 核心调用python的docker-sdk包执行命令执行文件流程执行命令流程pythonp…...
C++面向对象编程优化实战:破解性能瓶颈,提升应用效率
🧑 博主简介:CSDN博客专家、CSDN平台优质创作者,高级开发工程师,数学专业,拥有高级工程师证书;擅长C/C、C#等开发语言,熟悉Java常用开发技术,能熟练应用常用数据库SQL server,Oracle…...
JavaWeb 课堂笔记 —— 06 Maven
本系列为笔者学习JavaWeb的课堂笔记,视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程,实现javaweb企业开发全流程(涵盖SpringMyBatisSpringMVCSpringBoot等)》,章节分布参考视频教程,为同样学习…...
【Linux】网络层协议 IP
网络层协议 IP 一. 基本概念二. IP 协议格式三. 网段划分 (重点)1. 传统方法2. 子网掩码 四. 特殊 IP 地址五. IP 地址的数量限制六. 私有 IP 地址和公网 IP 地址七. 运营商1. 基本网络情况2. 全球网络情况 八. 路由九. IP 报文的分片和组装 网络层:在复杂的网络环境…...
嵌入式系统中如何构建事件响应架构
在复杂的嵌入式系统中,串口、BLE、定时器、中断等多种事件源并存,如何高效地统一调度这些异步事件,是系统稳定性和可维护性的关键。本文将结合 BLE 系统架构的经验,讲解如何构建一个通用的事件响应架构。 🧩 一、什么是事件响应架构? 事件响应架构(Event-Driven Archi…...
Flutter报错:Warning: CocoaPods is installed but broken
最近在做Flutter开发,在跑iOS的时候报错: 结论:CocoaPods安装有问题 解决办法: 先卸载本地CocoaPods,然后重新安装 查看当前版本 gem list | grep cocoapods执行卸载 sudo gem uninstall cocoapods直到 which -a…...
JdbcTemplate基本使用
JdbcTemplate概述 它是spring框架中提供的一个对象,是对原始繁琐的JdbcAPI对象的简单封装。spring框架为我们提供了很多的操作模板类。例如:操作关系型数据的JdbcTemplate和MbernateTemplate,操作nosql数据库的RedisTemplate,操作消息队列的…...
地图服务热点追踪:创新赋能,领航出行与生活
在数字化时代,地图服务早已超越了传统的导航范畴,成为智能出行、生活服务乃至应急救援等多领域的关键支撑。近期,地图服务领域热点不断,从技术创新到应用拓展,每一次突破都在重塑我们与世界交互的方式。本文将深入剖析…...
Flutter Invalid constant value.
0x00 问题 参数传入变量,报错! 代码 const Padding(padding: EdgeInsets.all(20),child: GradientProgressIndicator(value: _progress), ),_progress 参数报错:Invalid constant value. 0x01 原因 这种情况,多发生于ÿ…...
网络基础-路由技术和交换技术以及其各个协议
四、路由技术和交换技术 4.1路由技术 静态与动态协议的关系: 1,静态路由:由网络管理员手工填写的路由信息。 2,动态路由:所有路由器运行相同路由协议,之后,通过路由器之间的沟通,协…...
替换jeecg图标
替换jeecg图标 ant-design-vue-jeecg/src/components/tools/Logo.vue <!-- <img v-else src"~/assets/logo.svg" alt"logo">-->...
C#里使用WPF的MaterialDesignThemes
先要下载下面的包: <?xml version="1.0" encoding="utf-8"?> <packages><package id="MaterialDesignColors" version="5.2.1" targetFramework="net48" /><package id="MaterialDesignTheme…...
四六级听力考试播音系统:构建播放控制智能化、发射系统双备份、发射功率有冗余、安全稳定可靠的英语四六级听力播音系统使用环境
四六级听力考试播音系统:构建播放控制智能化、发射系统双备份、发射功率有冗余、安全稳定可靠的英语四六级听力播音系统使用环境 北京海特伟业科技有限公司任洪卓于2025年4月9日发布 传统的四六级听力考试播音系统往往存在信号不稳定、容易受干扰、无发射备份、无功率冗余、更…...
JavaScript性能优化(下)
1. 使用适当的算法和逻辑 JavaScript性能优化是一个复杂而重要的话题,尤其是在构建大型应用时。通过使用适当的算法和逻辑,可以显著提高代码的效率和响应速度。以下是一些关键策略和实践,用于优化JavaScript性能: 1.1. 采用适当…...
优先级队列的应用
第一题: 题解思路: 1、建立降序的优先级队列(底层是通过大堆来实现); 2、取最大的两个数来相减得到的结果再加入到优先级队列中(优先级队列会自动的排序); 3、返回队列的头部或者0即可; 题解代…...
从 macos 切换到 windows 上安装的工具类软件
起因 用了很多年的macos, 已经习惯了macos上的操作, 期望能在windows上获得类似的体验, 于是花了一些时间来找windows上相对应的软件. 截图软件 snipaste windows和macos都有的软件, 截图非常好用 文件同步软件 oneDrive: 尝试了不同的同步软件, 还是微软在各…...
探索原生JS的力量:自定义实现类似于React的useState功能
1.写在前面 本方案特别适合希望在历史遗留的原生JavaScript项目中实现简单轻量级数据驱动机制的开发者。无需引入任何框架或第三方库,即可按照此方法封装出类似于React中useState的功能,轻松为项目添加状态管理能力,既保持了项目的轻量性&am…...
Android系统深度定制:源码级拦截adb install的完整解决方案
一、需求背景与技术挑战 在Android 12.0系统定制开发中,我们面临一个关键需求:需要实现设备级应用安装管控,要求彻底禁用adb install安装方式。这种管控需要满足以下技术指标: 系统级全局拦截,覆盖所有adb install安装…...
基于大模型的非阵发性室性心动过速风险预测与诊疗方案研究报告
目录 一、引言 1.1 研究背景与意义 1.2 研究目的 1.3 国内外研究现状 二、非阵发性室性心动过速概述 2.1 定义与分类 2.2 发病机制 2.3 临床症状与诊断方法 三、大模型在预测中的应用原理 3.1 大模型简介 3.2 数据收集与预处理 3.3 模型训练与优化 3.4 预测原理与…...
HttpServletRequest是什么
HttpServletRequest 是 Java Servlet API 中的一个接口,表示 HTTP 请求对象。它封装了客户端(如浏览器)发送到服务器的请求信息,并提供了访问这些信息的方法。 1. 基本概念 作用: HttpServletRequest 提供了一种机制&…...
【现代深度学习技术】循环神经网络02:文本预处理
【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈PyTorch深度学习 ⌋ ⌋ ⌋ 深度学习 (DL, Deep Learning) 特指基于深层神经网络模型和方法的机器学习。它是在统计机器学习、人工神经网络等算法模型基础上,结合当代大数据和大算力的发展而发展出来的。深度学习最重…...
【微服务】SpringBoot 整合 Lock4j 分布式锁使用详解
目录 一、前言 二、Lock4j 概述 2.1 Lock4j 介绍 2.1.1 Lock4j 是什么 2.1.2 Lock4j 主要特征 2.1.3 Lock4j 技术特点 2.2 Lock4j 支持的锁类型 2.3 Lock4j 工作原理 2.4 Lock4j 应用场景 三、springboot 整合 lock4j 3.1 前置准备 3.1. 1 导入依赖 3.2 基于Redis…...
如何将前端组件封装并发布到npm的步骤详解
以下是封装前端组件并发布至npm仓库的完整步骤指南,结合多个最佳实践和常见问题解决方案: 一、环境准备与项目初始化 创建项目结构 • 使用Vue CLI或Create React App初始化项目: vue create my-component-lib # Vue npx create-react-app my-component-lib --template ty…...
【QT】QWidget 概述与核心属性(API)
🌈 个人主页:Zfox_ 🔥 系列专栏:Qt 目录 一:🔥 控件概述 🦋 控件体系的发展阶段 二:🔥 QWidget 核心属性 🦋 核心属性概览🦋 用件可用(…...
vue + uniapp 实现仿百度地图/高德地图/美团/支付宝 滑动面板 纯css 实现
概要 使用百度地图、各种单车APP时,对地图上的滑动面板很感兴趣,于是根据自己的理解实现了一下 之前用的js实现,滑动的时候没有原生好 这一次用的css实现 代码 <template><view class"container"><mapstyle"…...
124. 二叉树中的最大路径和
https://leetcode.cn/problems/binary-tree-maximum-path-sum/description/?envTypestudy-plan-v2&envIdtop-interview-150对于这题我开始的思路是路径我们可以看作是一条线,我们确定一个点后可以往两侧延伸(就是左右子树的方向)&#x…...
spark运行架构
运行架构:Spark采用master - slave结构,Driver作为master负责作业任务调度,Executor作为slave负责实际执行任务。 核心组件: Driver:执行Spark任务的main方法,负责将用户程序转化为作业、调度任务、跟踪E…...
开源的7B参数OCR视觉大模型:RolmOCR
1. 背景介绍 早些时候,Allen Institute for AI 发布了 olmOCR,这是一个基于 Qwen2-VL-7B 视觉语言模型(VLM)的开源工具,用于处理 PDF 和其他复杂文档的 OCR(光学字符识别)。开发团队对该工具的…...
Http代理服务器选型与搭建
代理服务器选型-Squid 缓存加速 缓存频繁访问的网页、图片等静态资源,减少对原始服务器的重复请求,提升响应速度支持HTTP、HTTPS、FTP等协议,通过本地缓存直接响应客户端请求 访问控制 基于ACL(访问控制列表)实现精细…...
如何实现Microsoft Word (.docx) 格式到 FastReport .NET (.frx) 文件的转换
现代数据处理技术和文档工作流自动化需要集成各种文件格式,以确保软件产品之间的无缝交互。Microsoft Word 凭借其丰富的功能,已成为最受欢迎的文本编辑器之一,适用于各种任务。 有时,您可能需要将这些文档转换为其他应用程序特定…...
雷电多开器自动化运行、自动登录APP刷新日用户活跃量
文章目录 简介接单价格代码对爬虫、逆向感兴趣的同学可以查看文章,一对一小班教学(系统理论和实战教程)、提供接单兼职渠道:https://blog.csdn.net/weixin_35770067/article/details/142514698 简介 客户有一个APP,需要在雷电模拟器每天自动运行APP,每台模拟器设置不同的I…...
Dify教程01-Dify是什么、应用场景、如何安装
Dify教程01-Dify是什么、应用场景、如何安装 大家好,我是星哥,上篇文章讲了Coze、Dify、FastGPT、MaxKB 对比,今天就来学习如何搭建Dify。 Dify是什么 **Dify 是一款开源的大语言模型(LLM) 应用开发平台。**它融合了后端即服务(…...
《深入探秘:分布式软总线自发现、自组网技术原理》
在当今数字化浪潮中,分布式系统的发展日新月异,而分布式软总线作为实现设备高效互联的关键技术,其自发现与自组网功能宛如打开智能世界大门的钥匙,为多设备协同工作奠定了坚实基础。 分布式软总线的重要地位 分布式软总线是构建…...
spring扫描自定义注解注册bean
前言 我们知道,在spring中,我们只需要加上注解Component,就可以自动注入到spring容器中,如果我们自定义注解,怎么让spring识别到,注入到容器中呢,下面我们来看看。 基础使用 自定义注解 Tar…...