react-rnd靠右显示

墨蓝 2022-09-06 12:28 187阅读 0赞

react-rnd是react一个拖拽的组件

本篇文章是以官方文档为基础整理出来的[https://www.npmjs.com/package/react-rnd][https_www.npmjs.com_package_react-rnd]

首先，这个控件默认是显示在左上角的，但是我这里的需求是要显示在右下角，研究了一下它的属性和方法，所有有了这篇文章

## 1.靠右显示 ##

<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方法，是控件拖动结束触发的事件，具体的参数写在图片上了**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

[https_www.npmjs.com_package_react-rnd]: https://www.npmjs.com/package/react-rnd
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20220829/c543421bf383479eafde768bf0650e76.png

发表评论取消回复

表情：

评论列表（有 0 条评论，187人围观）

还没有评论，来说两句吧...

相关阅读

相关 html文字一行时靠右，多行时靠左

html文字一行时靠右，多行时靠左元素居中 display: block; margin: auto; 文字居中 text-align: center; 文

柔光的暖阳◎/ 2024年02月21日 11:32/ 0 赞/ 63 阅读

相关安卓文本框里设置靠左居中或者靠右居中

这个是文字在文本框里左居中  <TextView

╰+哭是因爲堅強的太久メ/ 2023年06月24日 14:25/ 0 赞/ 28 阅读

相关微信小程序元素靠右css

参考：[https://blog.csdn.net/Reco\_177/article/details/89848718][https_blog.csdn.net_Reco_1

港控/mmm°/ 2023年06月19日 04:21/ 0 赞/ 9 阅读

相关 CSS flex 布局里面的靠右对齐

使用 flex 布局后，利用下面样式靠右显示： justify-content: flex-end; 无效的原因是，在设置靠右对齐时，一定要设置左边对齐为自动：

古城微笑少年丶/ 2023年06月11日 09:30/ 0 赞/ 31 阅读

相关使用伪类显示右边框

![20201023164507879.png][] 此处导航使用for循环右侧border如果使用border-right 显示的话，需要添加padding 但是

╰+哭是因爲堅強的太久メ/ 2022年12月17日 11:58/ 0 赞/ 167 阅读

相关 flex列表最后一行靠右对齐

// css .box { width:330px; display: flex; flex-wrap: wrap; j

傷城~/ 2022年11月12日 02:52/ 0 赞/ 192 阅读

相关 react-rnd靠右显示

react-rnd是react一个拖拽的组件本篇文章是以官方文档为基础整理出来的[https://www.npmjs.com/package/react-rnd][http

墨蓝/ 2022年09月06日 12:28/ 0 赞/ 188 阅读

相关右击显示菜单

自定义右击菜单，很棒的效果效果图： ![20151119211222596][] 第一步：做一个菜单第二步：通过js屏蔽浏览器鼠标右击第三步：获

亦凉/ 2022年08月18日 12:23/ 0 赞/ 231 阅读

相关 statusStrip的控件靠右停放——C#

在状态栏所有项目(StatusLabel、ProgressBar、DropDownButton等)前添加一个空白的StatusLabel (Text属性为空)，并将其Sprin

灰太狼/ 2022年08月14日 01:50/ 0 赞/ 251 阅读

相关 html 将块内容靠右下角显示

![20190808163631465.png][] 如图℃，位置父块绝对定位，子块相对定位 .parent-position{ position

r囧r小猫/ 2021年11月04日 14:34/ 0 赞/ 292 阅读