react-draggable实现拖拽功能实例详解
更新时间：2023年08月18日 09:34:31 作者：与掉发不共戴天
这篇文章主要给大家介绍了关于react-draggable实现拖拽功能的相关资料,React-Draggable一个使元素可拖动的简单组件,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
属性
常用属性
| 属性 | 默认值 | 介绍 |
|---|---|---|
| axis | x | handle拖动的方向，可选值 x ,y,both |
| handle | 无 | 指定拖动handle的class |
| position | 无 | handle的位置，需要实时改变，否则handle无法拖动，类似于react的受控组件 |
| onStrat | 方法 | 拖动开始 |
| onDrag | 方法 | 拖动中 |
| onStop | 方法 | 结束拖动 |
| onMouseDown | 方法 | 触发点击 |
属性列表
| 属性名称 | 说明 |
|---|---|
| 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 中必须要用一个容器来包裹住你要拖动的东西，否则不能用
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拖拽功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
开发今天给我提了一个sql编辑器输入框比较小，不支持放大，不太方便，下面看下我的处理方法，本文基于React+antd，给大家演示一个完整的全屏demo，感兴趣的朋友一起看看吧2021-10-10
本篇文章主要介绍了一个基于react的图片裁剪组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
react组件memo useMemo useCallback使用区别示例
这篇文章主要为大家介绍了react组件memo useMemo useCallback使用区别的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了react中useRef的应用使用详解的相关资料,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了React Fiber的工作原理的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能，要理解中间件，关键点是要知道，这个中间件是连接哪些部分的软件，它在中间做了什么事，提供了什么服务2023-01-01
解决React报错Unexpected default export of an
这篇文章主要为大家介绍了React报错Unexpected default export of anonymous function解决方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要为大家介绍了React Native 资源包拆分实战分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
本文主要介绍了React组件中默认封装了很多属性，有的是提供给开发者操作的，其中有三个属性非常重要：state、props、refs。感兴趣的小伙伴可以参考阅读2023-03-03
这篇文章主要为大家介绍了React中如何处理承诺demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论