react-rnd靠右显示

来源：客趣旅游网

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

本篇文章是以官方文档为基础整理出来的

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

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

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文