您的当前位置：首页正文

react----元素的在窗口范围内的拖动（react-rnd)

来源：好走旅游网

利用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>

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

查看全文