react-rnd是react一个拖拽的组件
本篇文章是以官方文档为基础整理出来的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方法,是控件拖动结束触发的事件,具体的参数写在图片上了