react-rnd靠右显示的实现方式

react-rnd靠右显示

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

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

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

靠右显示

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。