react-rnd靠右显示

墨蓝 2022-09-06 12:28 163阅读 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 条评论，163人围观）

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

相关阅读

相关使用伪类显示右边框

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

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

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

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

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

相关 react-rnd靠右显示

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

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

相关右击显示菜单

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

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

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

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

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

相关管理者的无用功：靠加班、靠团建、靠个人

我从来没写过“管理”，虽然我的老本行是这个。只是最近，跟很多管理者交流之后，发现大家对团队管理这件事，都有很多困惑。我大学的专业是经济学，那时候一个老师跟我们说：经济

叁歲伎倆/ 2022年06月11日 08:29/ 0 赞/ 113 阅读

相关在Windows10右下角显示时间

1，找到控制面板 ![70][] 2，点击更改时间 ![70 1][] 3，点击其他设置 ![70 2][] 4，依次点击输入方框中的内容 ![70 3][]

爱被打了一巴掌/ 2022年05月17日 07:28/ 0 赞/ 353 阅读

相关设置statusStrip中子项居右显示

StatusStrip中没有单独设置某个子项左对齐或右对齐的属性，这时我们可以在需要右对齐的子项之前添加一个空白的Label类型的子项，并将它的Spring属性设置为True，

野性酷女/ 2022年02月25日 02:50/ 0 赞/ 237 阅读

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

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

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

相关 Markdown 图片居中居左居右显示

Markdown 图片居中居左居右显示

朱雀/ 2020年10月18日 00:51/ 0 赞/ 891 阅读