js拖拽交换元素位置
摘要:最近在做会议系统,9宫格小画面要支持拖拽调整顺序,需求已经实现了,简单记录下当时的逻辑处理。
/*=========== 关于拖拽逻辑处理 start ========= */
// 当前在拖动的下标
const curDragIndex = useRef<number>(-1);
/* 拖拽元素事件* onDragStart_开始* onDragend_结束
*/
const handleDragStart = (event: any, index: number) => {curDragIndex.current = index;onDropStart(index);
};
const handleDragend = (event: any, index: number) => {event.preventDefault();
}
/* 放置元素事件 * onDragEnter_进入放置目标时 * onDragover_在放置目标中移动时 * onDragleave_离开放置目标时* onDrag_放置在目标上并释放时
*/
const handleOnDragEnter = (event: any, index: number) => {// 阻止默认处理(不允许放置)event.preventDefault();
}
const handleOnDragLeave = (event: any, index: number) => {// 阻止默认处理(不允许放置)event.preventDefault();
}
const handleOnDragOver = (event: any, index: number) => {// 阻止默认处理(不允许放置)event.preventDefault();
}
const handleOnDrop = (event: any, index: number) => {event.preventDefault();// 处理拖拽交换hadnleSwitchItem(curDragIndex.current, index);
}
/*====== 关于拖拽逻辑处理 end ================ */
// 成员列表
const [memberList, setMemberList] = useState([{name: 'yyh1', id: 1}, {name: 'yyh2', id: 2},
]);
/* 处理拖拽交换curIndex: 0, 类型: number; 说明: 拖拽的下标tranIndex: 1, 类型: number; 说明: 被释放的下班
*/
const hadnleSwitchItem = (curIndex, tranIndex) => {const old = memberList[curIndex];// 交换位置memberList[curIndex] = memberList[tranIndex];memberList[tranIndex] = old;// 更新数据setMemberList([...memberList]);
};/* tsx 页面渲染 */
memberList.map((item, index) => {return <div key={index} className={`${style['user_item_' + (index + 1)]}`}draggable={true}onDragStart={(event) => handleDragStart(event, index)}onDragEnd={(event: any) => handleDragend(event, index)}onDragEnter={(event) => handleOnDragEnter(event, index)}onDragLeave={(event) => handleOnDragLeave(event, index)}onDragOver={(event) => handleOnDragOver(event, index)}onDrop={(event: any) => handleOnDrop(event, index)}></div>
});
相关文章:
js拖拽交换元素位置
摘要:最近在做会议系统,9宫格小画面要支持拖拽调整顺序,需求已经实现了,简单记录下当时的逻辑处理。 /* 关于拖拽逻辑处理 start */ // 当前在拖动的下标 const curDragIndex useRef<number>(-1); /* 拖拽元素事件* onDragStart_开始* onDragend_结束 */ const handleD…...
在 C++ 中实现自定义容器的实用指南
在 C 中实现自定义容器的实用指南 在 C 编程中,容器是存储和管理数据的基本工具。标准库提供了多种容器,如 std::vector、std::list 和 std::map,但在某些情况下,开发者可能需要实现自定义容器以满足特定需求。本文将详细介绍如何…...
《深入浅出WPF》读书笔记.4名称空间详解
《深入浅出WPF》读书笔记.4名称空间详解 背景 主要讲明名称空间概念,可以理解为命名空间的引用。 xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml" 👆如x可以理解为一些列命名空间的引用。 不一一列举,只讲几个特殊的…...
电驱动总成
电驱动总成(Electric Drive Assembly)是电动汽车和混合动力汽车中关键的组成部分,主要负责将电能转化为机械能,以驱动汽车的轮胎。电驱动总成包括多个关键组件,通常可以分为以下几个主要部分: ### 主要组成…...
JavaScript class和正则
正则表达式练习 出生日期 年 月 日 ()表示一个整体 console.log(1909.match(^19\\d{2}$)); console.log(2024.match(^20(([01][0-9])|(2[0-4]))$)); //年 console.log(1909.match(^(19\\d{2})|(20(([01][0-9])|(2[0-4])))$)); // 月 console.log(12.match(^(0[1-9])|(1[0-2])…...
[Linux#42][线程] 锁的接口 | 原理 | 封装与运用 | 线程安全
互斥量 mutex • 大部分情况,线程使用的数据都是局部变量,变量的地址空间在线程栈空间 内,这种情况,变量归属单个线程,其他线程无法获得这种变量。 • 但有时候,很多变量都需要在线程间共享,这…...
奇异递归Template有啥奇的?
如果一个模版看起来很头痛,那么大概率这种模版是用来炫技,没啥用的,但是CRTP这个模版,虽然看起来头大,但是却经常被端上桌~ 奇异递归模板模式(Curiously Recurring Template Pattern, CRTP)是一…...
每天五分钟深度学习框架pytorch:神经网络工具箱nn的介绍
本文重点 我们前面一章学习了自动求导,这很有用,但是在实际使用中我们基本不会使用,因为这个技术过于底层,我们接下来将学习pytorch中的nn模块,它是构建于autograd之上的神经网络模块,也就是说我们使用pytorch封装好的神经网络层,它自动会具有求导的功能,也就是说这部…...
【办公软件】安全风险 Microsoft 已阻止宏运行,因为此文件的来源不受信任
Excel 2019版本,就出现安全风险 Microsoft 已阻止宏运行 因为此文件的来源不受信任的问题,宏直接就用不了了。 网上的解决方法,文件右键属性->取消安全锁。但存在没有安全锁这个选项。后查询到一个简单的解决方法。 打开Excel表格->文件…...
JavaScript语法基础之流程结构(顺序、选择、循环结构)
目录 1. 流程控制 1.1. 流程控制简介 1.1.1. 顺序结构 1.1.2. 选择结构 1.1.3. 循环结构 1.2. 选择结构:if 1.2.1. 单向选择:if… 1.2.2. 双向选择:if…else… 1.2.3. 多向选择:if…else_if…else… 1.3. 选择结构&#…...
集团数字化转型方案(四)
集团数字化转型方案通过全面部署人工智能(AI)、大数据分析、云计算和物联网(IoT)技术,创建了一个智能化的企业运营平台,涵盖从业务流程自动化、实时数据监控、精准决策支持,到个性化客户服务和高…...
【MySQL索引】索引失效场景
索引失效 1 全值匹配肯定不失效 2 最佳左前缀法则 索引文件具有 B-Tree 的最左前缀匹配特性,如果左边的值未确定,那么无法使用此索引。 3 主键插入顺序 页分裂,建议 让主键具有 AUTO_INCREMENT 4 计算、函数、类型转换(自动或手动)导致…...
基于MATLAB视觉的静态手势识别系统
一、课题介绍及思路 为了丰富手势识别方法的多样性,提高手势识别的正确率,提出了一种基于手势轮廓像素变化的手势识别方法。在Matlab环境下,设计并开发了一个基于视觉的静态手势识别系统。系统主要由两部分组成:手势分割与手势识…...
day02-作业题
一、简答题 请说出方法定义的全格式 访问修饰符 静态修饰符 返回值 方法名(参数列表){方法体;retrun 返回值;}请说出方法重载的概念 在一个类中,可以定义方法名相同,参数列表不相同(参数类型、参数个数或者参数顺序不同)的方法请简述什么是类…...
torch.cuda.set_divice()
我申请了两块GPU,然后看两张显卡的编号 import torch torch.cuda.set_device(0) # 设置当前cuda设备编号为1 print("当前cuda设备是", torch.cuda.current_device()) # 获取当前cuda设备import torch torch.cuda.set_device(1) …...
<数据集>RSOD数据集<目标检测>
数据集格式:VOCYOLO格式 图片数量:936张 标注数量(xml文件个数):936 标注数量(txt文件个数):936 标注类别数:4 标注类别名称:[aircraft, oiltank, overpass, playground] 序号类别名称图片数框数1air…...
企业高性能web服务器之Nginx
文章目录 Apache经典的web服务端Apache prefork 模型Apache work 模型(适应市场)Apache event 模型 网络I/O网络I/O模型I/O模型网络I/O模型 Nginx架构和安装Nginx源码编译环境准备安装nginx Nginx的平滑升级及版本回滚 Nginx架构和进程Nginx进程结构Ngin…...
11-sentinel利用nacos作持久化
本文介绍sentinel配置数据的持久化方法。由于sentinel官方并没有提供持久化功能,大家在测试过程中也能发现sentinel服务重启后,原来配置的数据就丢了,本文就是来处理这一问题的。 做好心理准备,我们要修改sentinel的源代码&#…...
密码学之哈希算法
文章目录 1. 哈希函数概述1.1 哈希函数的定义1.2 哈希函数的重要性 2. SHA系列算法简介2.1 SHA系列的发展历史2.2 SHA系列的应用场景 3. 主要SHA算法详解3.1 MD5算法3.2 SHA-1算法3.3 SHA-2算法家族3.4 SHA-3算法 4. SHA算法的安全性分析4.1 安全性的重要性4.2 已知的攻击方法4…...
杰发科技AC7801——GPIO通过寄存器地址控制高低电平
通过这个寄存器来查看控制的是哪个ODR值,使用sample,发现是0x20080068的第7和第9位 使用51控制寄存器的代码来置高置低代码,注意变量需要用unsigned int来声明 unsigned int ledBit 0;mdelay(100);ledBit | (1 << 9); ledBit & ~…...
终极指南:如何让2012-2015年老款Mac安装最新macOS系统
终极指南:如何让2012-2015年老款Mac安装最新macOS系统 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 您的2012-2015年老款Mac是否已被苹果官方抛…...
RAG系统的需求分析
这个是一个基于私有知识库的智能对话平台,允许用户上传文档构建专属知识库,并通过自然语言交互的方式查询和获取知识。它结合了大语言模型和向量检索技术,让用户通过对话的形式与自己的知识库进行高效交互应用场景个人用户场景:学习助手&…...
数据仓库核心建模:星型模型与雪花模型全面对比与实战选择
数据仓库核心建模:星型模型与雪花模型全面对比与实战选择一、引言二、定义:什么是星型模型?什么是雪花模型?2.1 星型模型:定义2.2 雪花模型:定义三、结构流程图:直观对比两种模型3.1 星型模型流…...
Zotero Connector进阶:定制知乎内容抓取与快照/正文模式切换详解
1. 为什么需要定制知乎内容抓取? 作为一款强大的文献管理工具,Zotero在学术论文管理方面表现出色,但在处理知乎这类内容平台时却常常力不从心。我最初使用Zotero Connector抓取知乎内容时,经常遇到只保存了网页快照而无法获取完整…...
Deep-Live-Cam性能优化指南:从环境配置到实时换脸全流程解决方案
Deep-Live-Cam性能优化指南:从环境配置到实时换脸全流程解决方案 【免费下载链接】Deep-Live-Cam real time face swap and one-click video deepfake with only a single image 项目地址: https://gitcode.com/GitHub_Trending/de/Deep-Live-Cam Deep-Live-…...
Phi-4-mini-reasoning部署教程:多模型共存时GPU显存隔离配置技巧
Phi-4-mini-reasoning部署教程:多模型共存时GPU显存隔离配置技巧 1. 模型介绍 Phi-4-mini-reasoning是微软推出的3.8B参数轻量级开源模型,专为数学推理、逻辑推导和多步解题等强逻辑任务设计。这个模型主打"小参数、强推理、长上下文、低延迟&quo…...
如何用MusicFree插件打造你的专属音乐播放器:终极免费指南
如何用MusicFree插件打造你的专属音乐播放器:终极免费指南 【免费下载链接】MusicFreePlugins MusicFree播放插件 项目地址: https://gitcode.com/gh_mirrors/mu/MusicFreePlugins MusicFree插件是一个开源的音乐播放器扩展系统,它允许你将多个音…...
图的存储方式详解(邻接矩阵 + 邻接表)| 算法入门必看
在算法学习中,图是仅次于树的核心数据结构,广泛应用于路径规划、网络拓扑、社交关系等场景。而图的存储是后续图论算法(DFS、BFS、最短路等)的基础——选择合适的存储方式,能直接影响算法的时间和空间效率。 本文将详细讲解图的两种最常用存储方式:邻接矩阵和邻接表,从…...
SDXL 1.0工坊应用场景:短视频团队低成本制作分镜概念图
SDXL 1.0工坊应用场景:短视频团队低成本制作分镜概念图 1. 引言:短视频创作的痛点与新解法 对于短视频团队来说,创意是灵魂,但将创意快速、低成本地可视化,却常常是个难题。尤其是在前期策划阶段,制作分镜…...
AI赋能编辑器:借助快马为Notepad++理念添加智能编程助手
今天想和大家分享一个有趣的实践:如何为传统代码编辑器(比如Notepad)注入AI能力。虽然Notepad本身轻量高效,但缺乏现代智能辅助功能。通过结合InsCode(快马)平台的AI能力,我们可以轻松实现智能补全、错误检查和代码优化…...
