react-rnd靠右显示的实现方式
更新时间：2025年05月28日 15:04:32 作者：Hero_rong
这篇文章主要介绍了react-rnd靠右显示的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react-rnd靠右显示
react-rnd是react一个拖拽的组件
本篇文章是以官方文档为基础整理出来的https://www.npmjs.com/package/react-rnd
首先，这个控件默认是显示在左上角的，但是我这里的需求是要显示在右下角，研究了一下它的属性和方法，所有有了这篇文章
靠右显示
<Rnd
default={{
x: 40,
y: 40,
width: 200,
height: 200
}}
minWidth:{200}
minHeight:{200}
maxWidth:{200}
maxHeight:{200}
position={{x:x,y:y}}
onDragStop={{(e,d)=>{dragStop(e,d)}}}
></Rnd>属性 default
- 里面的xy是可拖拽的范围，并不是初始化的位置
属性 position
- position就是控件在页面上的位置，x、y值只能设置正数，不能设置负数，
- 所以想要设置初始化的时候显示位置的话就是在这里哈
方法 onDragStop
- onDragStop方法，是控件拖动结束触发的事件，具体的参数写在图片上了
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了React项目中使用Redux的 react-redux，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要为大家介绍了react最流行的生态替代antdpro搭建轻量级后台管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
react学习每天一个hooks useWhyDidYouUpdate
这篇文章主要为大家介绍了react学习每天一个hooks useWhyDidYouUpdate使用示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了React Hook用法详解（6个常见hook）,本文通过实例代码给大家介绍了6个常见hook，需要的朋友可以参考下2021-04-04
本篇文章主要介绍了React组件通信详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2021-10-10
最近看项目中使用了 Redux, 便尝试了解一波 Redux 的设计思想与工作原理,所以本文详细的给大家介绍了Redux设计思想与工作原理,需要的朋友可以参考下2023-09-09
在现代的Web应用程序中,获取用户的地理位置信息是一项常见的需求,本文我们将介绍如何在React应用程序中简便地获取用户的经纬度信息,需要的可以参考下2023-11-11
React 是一个用于构建用户界面的 JAVASCRIPT 库。这篇文章主要介绍了ReactJS中的自定义组件的代码讲解,需要的朋友可以参考下2019-11-11
这篇文章主要为大家介绍了React Native中实现确认码组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了浅谈对于react-thunk中间件的简单理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论