react-rnd靠右显示

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

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

相关阅读

相关 Matlab元胞自动机双车道交通流模型-靠右行驶

Matlab元胞自动机双车道交通流模型-靠右行驶在交通流控制领域，元胞自动机（Cellular Automaton, CA）是一种常见的模拟方法。CA是一种离散化、并行化处

今天药忘吃喽~/ 2024年03月17日 20:36/ 0 赞/ 38 阅读

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

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

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

相关使用伪类显示右边框

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

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

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

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

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

相关 react-rnd靠右显示

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

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

相关右击显示菜单

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

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

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

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

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

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

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

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

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

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

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

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

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

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