React实现拖拽效果

2023-11-04

最近遇到一个拖拽的业务,那么我们需要了解一下拖拽的流程,让我们来实现这个组件吧。

一.拖拽流程

编写项目之前我们先了解一下拖拽大致的流程,以及触发的事件。

其实拖拽一共分为三个步骤:

1.onmousedown:拖拽事件的最开始,在这个简单我们要记录物体的原始坐标。

2.onmousemove:拖拽物体触发的事件,在这个阶段我们要记录实时的坐标,然后与原坐标进行计算,给物体赋予最新的坐标。

3.onmouseup:取消拖拽事件。结束拖拽。

拖拽事件的流程:onmousedown -> onmousemove -> onmouseup ->click事件

二.代码流程

 

有的同学可能在拖拽的时候,会触发点击事件,我是在onmousedown中获取最新时间,在onmouseup获取最后时间,然后在触发点击事件进行判断。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React实现拖拽效果 的相关文章

随机推荐

  • Maven的介绍及安装

    Maven 什么是Maven 在美国是一个口语化的词 代表专家 内行的意思 一个对Maven比较正式的定义是这么说的 Maven是一个项目管理工具 它包含了一个项目对象模型 POM Project Object Model 一组标准集合 一
  • 基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码+数据库

    基于 Vue 和 SpringBoot 的医院门诊预约挂号系统 完整代码下载地址 基于 Vue 和 SpringBoot 的医院门诊预约挂号系统源代码 数据库 软件简介 本软件是 基于 Vue 的医院门诊预约挂号管理系统 主要包含数据中心
  • 故障注入测试(Fault Injection Test)方法

    这周新一篇技术文章来袭 今天要分享的技术文章是 故障注入测试 Fault Injection Test 方法 过去只被归类为机械装置的汽车 现在变成了包括许多电子控制装置在内的尖端产品 最近上市的汽车上基本上都搭载了100个以上的控制器 由
  • 【pycharm】Cannot find reference ‘XXX‘ in ‘__init__.py‘ 解决办法

    Cannot find reference XXX in init py 解决办法 File gt Editor gt Inspections 把Unresolved references的 取消掉
  • C#中实现简单文件读写(附源代码)

    主要代码 using System IO Read File private void button1 Click object sender System EventArgs e try openFileDialog1 Filter tx
  • 从一个类中访问另一个类中的私有方法

    一般情况下我们无法在一个类中去访问另外一个类中非公有的方法 但有时候我们确实需要调用另外一个类中的私有方法 该怎么办呢 有两种方法可以解决 一个是利用反射 另一个就是用委托 我们可以看个Demo 1 namespace ReflectTes
  • Lua快速入门(1)

    Lua快速入门 LuatOS 在线模拟 lua在线测试 1 输出函数 print Hello World 2 变量 2 1 全局变量 局部变量和nil 通常定义的变量都为全局变量 加上local仅能在当前作用域下生效 没被赋值的变量都为ni
  • CSS——层次选择器

    文章目录 1 后代选择器 2 子选择器 3 向下选择器 4 通用选择器 1 后代选择器 在某个标签后面的所有子标签 后代选择器 body p background 03f39f 2 子选择器 后面一个 body gt p backgroun
  • QListWidget和QListWidgetItem的简单使用

    QListWidget可以显示一个清单 清单中的每个项目是QListWidgetItem的一个实例 每个项目可以通过QListWidgetItem来操作 可以通过QListWidgetItem来设置每个项目的图像与文字 下面说明3个例子 一
  • 美国数学家维纳智力早熟,11岁就上了大学,他曾在1935-1936年 应邀参加中国清华大学讲学,一次他参加某个重要会议,年轻的脸孔 引人注意,于是有人询问他的年龄,他回答说“我年龄的立方是个4位数

    package day01 import java util HashSet import java util Set 标题 猜年龄 美国数学家维纳智力早熟 11岁就上了大学 他曾在1935 1936年 应邀参加中国清华大学讲学 一次他参加
  • python __file__ 内置属性

    file 内置属性可以获取当前方法所在文件的路径 import random print random file usr lib python3 8 random py 由于import导入的时候是先判断当前路径下有没有import的文件
  • 计算方法-数值积分与微分

    文章目录 一 数值积分的基本思想 代数精度 二 插值型求积公式 插值型求积公式的基本思想 求积公式 插值型求积公式的代数精度 问题 三 牛顿 柯特斯求积公式 牛顿 柯特斯求积公式的引出 已知条件 公式 为什么提出公式中的 b a 柯特斯系数
  • Python——tensorflow2.8猫狗识别

    很早就想做这个猫狗识别的程序 所以跟着唐宇迪教程做了一遍 中间部分参数做了修改 后面预测部分用自己的猫猫图片做了预测 虽然有点问题 但最后还是可以识别出来 问题不大 下面对程序几个部分进行讲解 最后会附上整个程序的附件 一 数据处理 整个训
  • 三步使用bert搭建文本分类器

    不说废话 直接三步搭建最简单的bert文本多标签分类器 1 去官网https github com google research bert 下载一个bert模型 2 搭建bert service https github com hanx
  • 哈希学习简介

    一 背景介绍 1 首先介绍一下最近邻搜索 最近邻搜索问题 也叫相似性搜索 近似搜索 是从给定数据库中找到里查询点最近的点集的问题 给定一个点集 以及一个查询点q 需要找到离q最近的点的集合 在大规模高维度空间的情况下 这个问题就变得非常难
  • android 进程监控 top

    adb shell top h top h Usage top m max procs n iterations d delay s sort column t h m num Maximum number of processes to
  • mybatis-plus自定义分页实现 (精)

    添加pom依赖
  • EVE-NG初始安装及配置_笔记

    1 安装VMware 2 导入EVE的ova镜像 3 初始化配置 ubantu server linux 设置root密码 域名 主机名 IP地址 root eve 123456 123456 主机名 域名 IP地址获取 DHCP STAT
  • mysql数据库管理-mysql分区表管理

    1 分区概述 无论是哪种 MySQL 分区类型 要么分区表上没有主键 唯一键 要么分区表的主键 唯一键都必须包含分区键 也就是说不能使用主键 唯一键字段之外的其他字段分区 例如 emp 表的主键为id字段 在尝试通过store id字段分区
  • React实现拖拽效果

    最近遇到一个拖拽的业务 那么我们需要了解一下拖拽的流程 让我们来实现这个组件吧 一 拖拽流程 编写项目之前我们先了解一下拖拽大致的流程 以及触发的事件 其实拖拽一共分为三个步骤 1 onmousedown 拖拽事件的最开始 在这个简单我们要