基于react-draggable实现边界拖拽功能

(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;
}