react-draggable实现拖拽详解
react-draggable
- 属性
- 常用属性
- 属性列表
- 事件列表
- 举例
- 首先安装 react-draggable
- 实现移动
- 希望小编写的能够帮助到你😘
属性
常用属性
| 属性 | 默认值 | 介绍 |
|---|---|---|
| axis | x | handle拖动的方向,可选值 x ,y,both |
| handle | 无 | 指定拖动handle的class |
| position | 无 | handle的位置,需要实时改变,否则handle无法拖动,类似于react的受控组件 |
| onStrat | 方法 | 拖动开始 |
| onDrag | 方法 | 拖动中 |
| onStop | 方法 | 结束拖动 |
属性列表
| 属性名称 | 说明 |
|---|---|
| bounds | 指定移动的边界值;可以设置的值 left:number,top:number,right:number,bottom:number |
| group | group= “name”,相同的组之间可以相互拖拽 |
| sort | sort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序,在其他组可以拖动排序 |
| delay | delay= “0”, 鼠标按下后多久可以拖拽 |
| touchStartThreshold | 鼠标移动多少px才能拖动元素 |
| disabled | disabled= “true”,是否启用拖拽组件 |
| animation | 拖动时的动画效果,还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果 |
| handle | handle=“.mover” 只有当鼠标移动到css为mover类的元素上才能拖动 |
| filter | filter=“.unmover” 设置了unmover样式的元素不允许拖动 |
| draggable | draggable=“.item” 那些元素是可以被拖动的 |
| ghostClass | ghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
| chosenClass | ghostClass=“hostClass” 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
| dragClass | dragClass="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true |
| dataIdAttr | dataIdAttr: ‘data-id’ |
| forceFallback | 默认false,忽略HTML5的拖拽行为,因为h5里有个属性也是可以拖动,你要自定义ghostClass chosenClass dragClass样式时,建议forceFallback设置为true |
| fallbackClass | 默认false,克隆的DOM元素的类名 |
| allbackOnBody | 默认false,克隆的元素添加到文档的body中 |
| fallbackTolerance | 拖拽之前应该移动的px |
| scroll | 默认true,有滚动区域是否允许拖拽 |
| scrollFn | 滚动回调函数 |
| scrollSensitivity | 距离滚动区域多远时,滚动滚动条 |
| scrollSpeed | 滚动速度 |
事件列表
| 属性名称 | 说明 |
|---|---|
| start | 开始拖动时触发的事件 |
| add | 从一个数组拖拽到另外一个数组时触发的事件 |
| remove | 移除事件 |
| update | 拖拽变换位置时触发的事件 |
| end | 拖拽完成时的事件 |
| choose | 鼠标点击选中要拖拽元素时的事件 |
| unchoose | 选中后松开鼠标的事件 |
| sort | 位置变化时的事件 |
| clone | 从一个数组拖拽到另外一个数组时触发的事件和add不同,clone是复制了数组元素 |
| move | 自定义控制那些元素可以拖拽或不允许拖拽并控制是否允许停靠 |
举例
首先安装 react-draggable
yarn add react-draggable / npm i react-draggable
在页面中导入react-draggable
import Draggable from 'react-draggable'
实现移动
在Draggable 中必须要用一个容器来包裹住你要拖动的东西,否则不能用
- 基本
<Draggable size={200}><div><div className='mover' ></div><div className='unmover'>asdasdasd</div></div>
</Draggable>
效果

2. 初始化开始位置
<Draggable size={200} defaultPosition={{ x: 25, y: 25 }}><div><div className='mover' ></div><div className='unmover'>asdasdasd</div></div>
</Draggable>
效果

3. 限制拖拽范围
<Draggable size={200} defaultPosition={{ x: 25, y: 25 }} bounds={{ top: 0 }}><div><div className='mover' ></div><div className='unmover'>asdasdasd</div></div>
</Draggable>
效果

4. 限制拖拽内容
<Draggable size={200} defaultPosition={{ x: 25, y: 25 }} bounds={{ top: 0 }}handle=".mover"filter=".unmover" ><div><div className='mover' ></div><div className='unmover'>asdasdasd</div></div>
</Draggable>
效果

希望小编写的能够帮助到你😘
相关文章:
react-draggable实现拖拽详解
react-draggable属性常用属性属性列表事件列表举例首先安装 react-draggable实现移动希望小编写的能够帮助到你😘属性 常用属性 属性默认值介绍axisxhandle拖动的方向,可选值 x ,y,bothhandle无指定拖动handle的classposition无handle的位置࿰…...
01.进程和线程的区别
进程和线程的区别进程和线程是计算机中的两个核心概念,它们都是用来实现并发执行的方式,但是它们在实现并发的方式和资源管理方面有一些重要的区别。进程是一个程序的运行实例。每个进程都有自己的内存空间、代码、数据和系统资源(如文件描述…...
逻辑优化-rewrite
简介 逻辑综合中的rewrite算法是一种常见的优化算法,其主要作用是通过对逻辑电路的布尔函数进行等效变换,从而达到优化电路面积、时序和功耗等目的。本文将对rewrite算法进行详细介绍,并附带Verilog代码示例。 一、算法原理 rewrite算法的…...
文件传输与聊天系统设计
技术:Java等摘要:本文介绍了一种基于TCP/IP协议使用Socket技术实现的聊天室系统,包括私聊功能和文件传输功能,对系统的主要模块进行了分析,并对系统实现过程中遇到的关键性技术进行了阐述,最后对系统进行了…...
蓝桥杯第十四届校内赛(第三期) C/C++ B组
一、填空题 (一)最小的十六进制 问题描述 请找到一个大于 2022 的最小数,这个数转换成十六进制之后,所有的数位(不含前导 0)都为字母(A 到 F)。 请将这个数的十进制形式作…...
有关平方或高次方的公式整理一元高次方程的求解
Part.I Introduction 这篇博文记录一下数学中常用的有关平方或高次方的一些公式。 Chap.I 一些结论 下面一部分汇总了一些重要的结论 完全平方公式:(ab)2a22abb2(ab)^2a^22abb^2(ab)2a22abb2平方差公式:a2−b2(ab)(a−b)a^2-b^2(ab)(a-b)a2−b2(ab)(…...
Java笔记3
ArrayListArrayList<String> list new Arraylist<>();<>是泛型表示存放的数据类型,注意不能是基本数据类型;增删改查增:add 返回值为true删:remove 1.直接删元素2.根据索引删元素改:set(…...
Leetcode.2202 K 次操作后最大化顶端元素
题目链接 Leetcode.2202 K 次操作后最大化顶端元素 Rating : 1717 题目描述 给你一个下标从 0开始的整数数组 nums,它表示一个 栈 ,其中 nums[0]是栈顶的元素。 每一次操作中,你可以执行以下操作 之一 : 如果栈非空…...
JAVA知识点全面总结3:String类的学习
三.String类学习 1.String,StringBuffer,StringBuilder的区别? 2.字符串拼接用加号的原理 ? 3.字符串常量池如何理解? 4.String的intern方法理解? 5.String的equals方法和compareTo方法的使用…...
Eureka注册中心和Nacos注册中心详解以及Nacos与Eureka有什么区别?
目录:前言Eureka注册中心Nacos注册中心Nacos与Eureka有什么区别?前言提供接口给其它微服务调用的微服务叫做服务提供者,而调用其它微服务提供的接口的微服务则是服务消费者。如果服务A调用了服务B,而服务B又调用了服务C࿰…...
Web3D发展趋势以及Web3D应用场景
1,Web3D发展趋势随着互联网的快速发展,Web3D技术也日渐成熟,未来发展趋势也值得关注。以下是Web3D未来发展趋势的七个方面:可视化和可交互性的增强:Web3D可以为三维数据提供可视化和可交互性的增强,将极大地…...
2023-3-4 刷题情况
按位与为零的三元组 题目描述 给你一个整数数组 nums ,返回其中 按位与三元组 的数目。 按位与三元组 是由下标 (i, j, k) 组成的三元组,并满足下述全部条件: 0 < i < nums.length 0 < j < nums.length 0 < k < nums.l…...
前端面试总结
1.引言 最近参加了大量的招聘会,投递了大量的简历,整整体会了从“随便找个厂上一下”——“还是的找个大厂”——“没人要”——“急了急了,海投一波”——“工资有点尬”——“海投中…”。简单说一下自己的一些感受吧,现在的前端属实有点尴…...
Geospatial Data Science (6): Spatial clustering
Geospatial Data Science (6): Spatial clustering 1.Clustering, spatial clustering, and geodemographics 本节涉及空间观测的统计聚类。许多问题和主题都是复杂的现象,涉及多个维度,难以归纳为一个单一的变量。在统计学术语中,我们把这一类问题称为多变量,而不是在…...
蚁群算法优化问题
%%%%%%%%%%%%蚁群算法解决 TSP 问题%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%初始化%%%%%%%%%%%%%%%%%%% clear all; %清除所有变量 close all; %清图 clc; %清屏 m 50; %蚂蚁个数 Alpha 1; %信息素重要程度参数 Beta 5; %启发式因子重要程度参数 Rho 0.1; %信息素蒸发系数 G 20…...
为啥一个 main 方法就能启动项目
在 Spring Boot 出现之前,我们要运行一个 Java Web 应用,首先需要有一个 Web 容器(例如 Tomcat 或 Jetty),然后将我们的 Web 应用打包后放到容器的相应目录下,最后再启动容器。 在 IDE 中也需要对 Web 容器…...
洛谷:P1554 梦中的统计 JAVA
思路:定义一个长度为10的数组,数组下标代表数组元素的数字,比如arr[0]代表数字0.用一个for循环,对每个数先取余再取整,知道取整得到的数为0,说明该数字已经被拆解完了。今天又学了一个输入,原来…...
C++初学笔记整理
目录 1. C关键字 2. 命名空间 1)命名空间的引入和概述 2)命名空间的定义 3)std与命名空间的使用 4).相关特性 3. C输入&输出 4. 缺省参数 1 )缺省参数概念 2)使用及分类 a.全缺省 b.部分缺省 5. 函数…...
记录--在Vue3这样子写页面更快更高效
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 在开发管理后台过程中,一定会遇到不少了增删改查页面,而这些页面的逻辑大多都是相同的,如获取列表数据,分页,筛选功能这些基本功能。而…...
【程序设计与算法(三)】测验和作业题部分答案汇总(面向对象篇)
题目来源:程序设计与算法(三)测验和作业题汇总 文章目录001:简单的swap002:难一点的swap003:好怪异的返回值004:神秘的数组初始化005:编程填空:学生信息处理程序006:奇怪的类复制007:返回什么才好呢008:超简单的复数类009:哪来的输…...
2026做GEO,豆包、DeepSeek、元宝都爱引用哪些媒体?这份清单收好了!
你是不是也发现了这个 “诡异” 的现象?过去,我们拼命讨好搜索引擎的爬虫,优化关键词密度、买外链,只为排在百度搜索结果的第一页。而现在,用户变了。他们不再在搜索框里试错关键词,而是直接打开豆包、Deep…...
iPhone上跑Transformer太慢?试试EfficientFormer-L1,实测延迟比MobileViT快一倍
iPhone端Transformer模型加速实战:EfficientFormer-L1性能优化解析 移动端AI开发者常面临一个核心矛盾:如何在有限的计算资源下,既保持模型精度又实现实时推理?传统方案往往需要在MobileNet等轻量卷积网络和视觉Transformer&#…...
高效低成本馈电保护电路设计与应用
1. 为什么需要馈电保护电路? 有源天线在通信系统中扮演着重要角色,但实际使用中经常会遇到一些棘手的问题。比如在野外作业时,技术人员可能会频繁插拔天线;或者在长期运行过程中,天线内部电路可能出现故障。这些情况都…...
MAA游戏助手:如何让《明日方舟》的日常任务自动完成?
MAA游戏助手:如何让《明日方舟》的日常任务自动完成? 【免费下载链接】MaaAssistantArknights 《明日方舟》小助手,全日常一键长草!| A one-click tool for the daily tasks of Arknights, supporting all clients. 项目地址: h…...
Z-Image-Turbo-rinaiqiao-huiyewunv实战落地:高校动漫社AI辅助创作工作流搭建
Z-Image-Turbo-rinaiqiao-huiyewunv实战落地:高校动漫社AI辅助创作工作流搭建 1. 项目背景与核心价值 高校动漫社团经常面临创作效率低、人手不足的问题。传统手绘方式需要大量时间,而通用AI绘图工具又难以保持角色一致性。Z-Image Turbo (辉夜大小姐-…...
基于pyqt的规则匹配的恶意代码检测系统
当前的恶意代码检测研究中,尽管传统特征匹配(signature-based detection)仍然广泛应用,但面对快速更新且具有混淆、加壳、动态加载、自变异(polymorphism/metamorphism)等能力的新型恶意代码&am…...
2024年DroidKaigi官方会议应用:Android DataStore轻量级数据存储终极指南
2024年DroidKaigi官方会议应用:Android DataStore轻量级数据存储终极指南 【免费下载链接】conference-app-2024 The Official Conference App for DroidKaigi 2024 项目地址: https://gitcode.com/GitHub_Trending/co/conference-app-2024 DroidKaigi 2024官…...
StructBERT-WebUI部署案例:AI客服中台语义路由模块集成实践
StructBERT-WebUI部署案例:AI客服中台语义路由模块集成实践 1. 项目背景与价值 在现代AI客服系统中,语义理解是核心能力之一。当用户提出"我的订单怎么还没到"时,系统需要准确理解这其实是在询问"物流状态",…...
广告发光字全科普
广告发光字全科普:从原理到类型,一篇看懂门头招牌的发光逻辑走在城市街头,从连锁品牌门头到商场导视、楼宇标识,随处可见夜晚自动亮起的广告发光字。它早已不是简单的霓虹灯,而是融合材料、工艺、光学与工程的成熟标识…...
SenseVoice-small实战教程:导出SRT/VTT字幕文件用于Premiere剪辑
SenseVoice-small实战教程:导出SRT/VTT字幕文件用于Premiere剪辑 你是不是经常遇到这样的烦恼?录了一段视频,或者拿到一段会议录音,想要给它配上精准的字幕,却发现自己要花几个小时去听写、校对、打时间轴?…...
