利用react-rnd插件,实现元素在视窗内的拖动改变位置
先进行插件的安装
npm i -S react-rnd
组件内部引入
import { Rnd } from "react-rnd";
注意:这里引入的时候要用{ Rnd }
,如果直接是Rnd
,页面会报错
react-dom.development.js:55 Uncaught Error: Element type is invalid:
expected a string (for built-in components) or a class/function (for composite components) but got:
undefined. You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
使用:像自定义的组件一样,直接使用就好,为了避免缩放,设置了最小和最大相同,这里实现的需求是最基础的,所以没有添加任何其他的属性
<Rnd
default={{
x: 50,
y: 300,
width: 200,
height: 200
}}
minWidth={200}
minHeight={200}
maxWidth={200}
maxHeight={200}
bounds="window"
>
<h3>5555555</h3>
</Rnd>