(1)安装
npm install react-draggable
yarn add react-draggable
(2)引入
import Draggable from 'react-draggable'
(3)实现代码
import React, { memo } from 'react'
import './style.less'
import Draggable from 'react-draggable';
export default memo(function Login() {
return (
// handle=".drg"当鼠标移动到css为drg类的元素上才能拖动
// bounds=".body"限制在body类中可拖动
<div className='body'>
<Draggable handle=".drg" bounds=".body">
<div className='drg'>小盒子</div>
</Draggable>
</div>
)
})
.drg {
width: 100px;
height: 100px;
background-color: pink;
}
.body{
width: 500px;
height: 500px;
border: 1px solid #ccc;
}