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>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值