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

react-draggable实现拖拽详解

react-draggable

  • 属性
    • 常用属性
    • 属性列表
  • 事件列表
  • 举例
    • 首先安装 react-draggable
    • 实现移动
  • 希望小编写的能够帮助到你😘

属性

常用属性

属性默认值介绍
axisxhandle拖动的方向,可选值 x ,y,both
handle指定拖动handle的class
positionhandle的位置,需要实时改变,否则handle无法拖动,类似于react的受控组件
onStrat方法拖动开始
onDrag方法拖动中
onStop方法结束拖动

属性列表

属性名称说明
bounds指定移动的边界值;可以设置的值 left:number,top:number,right:number,bottom:number
groupgroup= “name”,相同的组之间可以相互拖拽
sortsort= “true”,是否开启内部排序,如果设置为false,它所在组无法排序,在其他组可以拖动排序
delaydelay= “0”, 鼠标按下后多久可以拖拽
touchStartThreshold鼠标移动多少px才能拖动元素
disableddisabled= “true”,是否启用拖拽组件
animation拖动时的动画效果,还是很酷的,数字类型。如设置animation=1000表示1秒过渡动画效果
handlehandle=“.mover” 只有当鼠标移动到css为mover类的元素上才能拖动
filterfilter=“.unmover” 设置了unmover样式的元素不允许拖动
draggabledraggable=“.item” 那些元素是可以被拖动的
ghostClassghostClass=“ghostClass” 设置拖动元素的占位符类名,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
chosenClassghostClass=“hostClass” 被选中目标的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
dragClassdragClass="dragClass"拖动元素的样式,你的自定义样式可能需要加!important才能生效,并把forceFallback属性设置成true
dataIdAttrdataIdAttr: ‘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 中必须要用一个容器来包裹住你要拖动的东西,否则不能用

  1. 基本
 <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实现移动希望小编写的能够帮助到你&#x1f618;属性 常用属性 属性默认值介绍axisxhandle拖动的方向&#xff0c;可选值 x ,y,bothhandle无指定拖动handle的classposition无handle的位置&#xff0…...

01.进程和线程的区别

进程和线程的区别进程和线程是计算机中的两个核心概念&#xff0c;它们都是用来实现并发执行的方式&#xff0c;但是它们在实现并发的方式和资源管理方面有一些重要的区别。进程是一个程序的运行实例。每个进程都有自己的内存空间、代码、数据和系统资源&#xff08;如文件描述…...

逻辑优化-rewrite

简介 逻辑综合中的rewrite算法是一种常见的优化算法&#xff0c;其主要作用是通过对逻辑电路的布尔函数进行等效变换&#xff0c;从而达到优化电路面积、时序和功耗等目的。本文将对rewrite算法进行详细介绍&#xff0c;并附带Verilog代码示例。 一、算法原理 rewrite算法的…...

文件传输与聊天系统设计

技术&#xff1a;Java等摘要&#xff1a;本文介绍了一种基于TCP/IP协议使用Socket技术实现的聊天室系统&#xff0c;包括私聊功能和文件传输功能&#xff0c;对系统的主要模块进行了分析&#xff0c;并对系统实现过程中遇到的关键性技术进行了阐述&#xff0c;最后对系统进行了…...

蓝桥杯第十四届校内赛(第三期) C/C++ B组

一、填空题 &#xff08;一&#xff09;最小的十六进制 问题描述   请找到一个大于 2022 的最小数&#xff0c;这个数转换成十六进制之后&#xff0c;所有的数位&#xff08;不含前导 0&#xff09;都为字母&#xff08;A 到 F&#xff09;。   请将这个数的十进制形式作…...

有关平方或高次方的公式整理一元高次方程的求解

Part.I Introduction 这篇博文记录一下数学中常用的有关平方或高次方的一些公式。 Chap.I 一些结论 下面一部分汇总了一些重要的结论 完全平方公式&#xff1a;(ab)2a22abb2(ab)^2a^22abb^2(ab)2a22abb2平方差公式&#xff1a;a2−b2(ab)(a−b)a^2-b^2(ab)(a-b)a2−b2(ab)(…...

Java笔记3

ArrayListArrayList<String> list new Arraylist<>();<>是泛型表示存放的数据类型&#xff0c;注意不能是基本数据类型&#xff1b;增删改查增&#xff1a;add 返回值为true删&#xff1a;remove 1.直接删元素2.根据索引删元素改&#xff1a;set&#xff08…...

Leetcode.2202 K 次操作后最大化顶端元素

题目链接 Leetcode.2202 K 次操作后最大化顶端元素 Rating &#xff1a; 1717 题目描述 给你一个下标从 0开始的整数数组 nums&#xff0c;它表示一个 栈 &#xff0c;其中 nums[0]是栈顶的元素。 每一次操作中&#xff0c;你可以执行以下操作 之一 &#xff1a; 如果栈非空…...

JAVA知识点全面总结3:String类的学习

三.String类学习 1.String&#xff0c;StringBuffer&#xff0c;StringBuilder的区别&#xff1f; 2.字符串拼接用加号的原理 &#xff1f; 3.字符串常量池如何理解&#xff1f; 4.String的intern方法理解&#xff1f; 5.String的equals方法和compareTo方法的使用&#xf…...

Eureka注册中心和Nacos注册中心详解以及Nacos与Eureka有什么区别?

目录&#xff1a;前言Eureka注册中心Nacos注册中心Nacos与Eureka有什么区别&#xff1f;前言提供接口给其它微服务调用的微服务叫做服务提供者&#xff0c;而调用其它微服务提供的接口的微服务则是服务消费者。如果服务A调用了服务B&#xff0c;而服务B又调用了服务C&#xff0…...

Web3D发展趋势以及Web3D应用场景

1&#xff0c;Web3D发展趋势随着互联网的快速发展&#xff0c;Web3D技术也日渐成熟&#xff0c;未来发展趋势也值得关注。以下是Web3D未来发展趋势的七个方面&#xff1a;可视化和可交互性的增强&#xff1a;Web3D可以为三维数据提供可视化和可交互性的增强&#xff0c;将极大地…...

2023-3-4 刷题情况

按位与为零的三元组 题目描述 给你一个整数数组 nums &#xff0c;返回其中 按位与三元组 的数目。 按位与三元组 是由下标 (i, j, k) 组成的三元组&#xff0c;并满足下述全部条件&#xff1a; 0 < i < nums.length 0 < j < nums.length 0 < k < nums.l…...

前端面试总结

1.引言 最近参加了大量的招聘会&#xff0c;投递了大量的简历&#xff0c;整整体会了从“随便找个厂上一下”——“还是的找个大厂”——“没人要”——“急了急了,海投一波”——“工资有点尬”——“海投中…”。简单说一下自己的一些感受吧&#xff0c;现在的前端属实有点尴…...

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 出现之前&#xff0c;我们要运行一个 Java Web 应用&#xff0c;首先需要有一个 Web 容器&#xff08;例如 Tomcat 或 Jetty&#xff09;&#xff0c;然后将我们的 Web 应用打包后放到容器的相应目录下&#xff0c;最后再启动容器。 在 IDE 中也需要对 Web 容器…...

洛谷:P1554 梦中的统计 JAVA

思路&#xff1a;定义一个长度为10的数组&#xff0c;数组下标代表数组元素的数字&#xff0c;比如arr[0]代表数字0.用一个for循环&#xff0c;对每个数先取余再取整&#xff0c;知道取整得到的数为0&#xff0c;说明该数字已经被拆解完了。今天又学了一个输入&#xff0c;原来…...

C++初学笔记整理

目录 1. C关键字 2. 命名空间 1&#xff09;命名空间的引入和概述 2&#xff09;命名空间的定义 3&#xff09;std与命名空间的使用 4).相关特性 3. C输入&输出 4. 缺省参数 1 &#xff09;缺省参数概念 2&#xff09;使用及分类 a.全缺省 b.部分缺省 5. 函数…...

记录--在Vue3这样子写页面更快更高效

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 前言 在开发管理后台过程中&#xff0c;一定会遇到不少了增删改查页面&#xff0c;而这些页面的逻辑大多都是相同的&#xff0c;如获取列表数据&#xff0c;分页&#xff0c;筛选功能这些基本功能。而…...

【程序设计与算法(三)】测验和作业题部分答案汇总(面向对象篇)

题目来源&#xff1a;程序设计与算法&#xff08;三&#xff09;测验和作业题汇总 文章目录001:简单的swap002:难一点的swap003:好怪异的返回值004:神秘的数组初始化005:编程填空&#xff1a;学生信息处理程序006:奇怪的类复制007:返回什么才好呢008:超简单的复数类009:哪来的输…...

vue3 diff算法中的-双端 Diff + 最长递增子序列 讲解

一句话总结 Vue3 Diff 双端比较&#xff08;快速复用&#xff09; 最长递增子序列&#xff08;最小移动 DOM&#xff09; 目的&#xff1a;在乱序节点中&#xff0c;只移动最少 DOM&#xff0c;实现最高效更新。1. 先搞懂&#xff1a;Vue3 对比 Vue2 差在哪&#xff1f; Vue2…...

MCP3208 12位SPI ADC嵌入式驱动与硬件设计实战

1. MCP3208芯片深度解析&#xff1a;面向嵌入式系统的12位8通道SPI模数转换器工程实践1.1 芯片定位与核心价值MCP3208是Microchip公司推出的逐次逼近型&#xff08;SAR&#xff09;模数转换器&#xff0c;专为资源受限的嵌入式系统设计。其核心价值在于以极简硬件接口&#xff…...

League-Toolkit:颠覆式英雄联盟客户端增强工具的全攻略

League-Toolkit&#xff1a;颠覆式英雄联盟客户端增强工具的全攻略 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit是一款基于官…...

提升效率:用快马AI一键生成windows18-hd19风格的CSS组件库

提升效率&#xff1a;用快马AI一键生成windows18-hd19风格的CSS组件库 最近在做一个需要windows18-hd19设计风格的项目&#xff0c;这种风格的界面元素特别多&#xff0c;手动编写样式简直让人头大。光是调色板、阴影效果这些基础样式就要折腾半天&#xff0c;更别说那些复杂的…...

揭秘JVM创世过程之Call Stub进入Java世界的门票

前言 本文旨在记录近期研读Java源码的学习心得与疑难问题。由于个人理解水平有限&#xff0c;文中内容可能存在疏漏&#xff0c;恳请读者不吝指正。 前情回顾 在揭秘JVM创世过程之两种语言首席外交官JavaCalls&#xff0c;一文中将JVM看作Java世界中一个拥有两种语言的领事馆…...

新手福音:在快马平台开启你的云端代码编程第一课

作为一名刚接触编程的新手&#xff0c;我最近发现了一个特别适合入门的学习方式——云端代码编程。以前总觉得学编程要先装一堆软件、配置环境&#xff0c;光是这些准备工作就能劝退不少人。但在InsCode(快马)平台上&#xff0c;这些烦恼都不存在了。 零门槛的编程初体验 打开平…...

Qwen3-14B开源模型实战:跨境电商多平台产品文案批量生成

Qwen3-14B开源模型实战&#xff1a;跨境电商多平台产品文案批量生成 1. 跨境电商文案生成的痛点与解决方案 跨境电商运营面临的最大挑战之一&#xff0c;就是需要为同一款产品在不同平台&#xff08;亚马逊、eBay、速卖通等&#xff09;生成符合各自规范的优质文案。传统人工…...

BilibiliDown高效音频提取实战指南:从问题解决到场景落地

BilibiliDown高效音频提取实战指南&#xff1a;从问题解决到场景落地 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirror…...

PakePlus云打包入门指南:从零到一的GitHub Token配置与安全实践

PakePlus云打包入门指南&#xff1a;从零到一的GitHub Token配置与安全实践 【免费下载链接】PakePlus Turn any webpage/HTML/Vue/React and so on into desktop and mobile app under 5M with easy in few minutes. 轻松将任意网站/HTML/Vue/React等项目构建为轻量级(小于5M)…...

DDA直线插补算法在MATLAB中的优化实现与性能分析

1. DDA直线插补算法基础与MATLAB实现 DDA&#xff08;Digital Differential Analyzer&#xff09;算法是计算机图形学中最基础的直线生成算法之一&#xff0c;它的核心思想是利用直线的微分方程来递推计算像素点位置。我第一次接触这个算法是在大学计算机图形学课程上&#xff…...