下載 插件

yarn add react-draggable / npm i react-draggable

具體屬性 參考?react-draggable實現(xiàn)拖拽詳解 (xbhp.cn)

引入插件

import Draggable from 'react-draggable'

實現(xiàn)代碼

defaultPosition：初始位置

bounds：限制區(qū)域

import React from 'react';
import Draggable from 'react-draggable'
const Tuozhuai = () => {
    return (
        <div>
            123
            <Draggable size={200}  defaultPosition={{ x: 25, y: 25 }}>
                <div>
                    <div className='mover' >
                        132
                    </div>
                    <div className='unmover'>
                        asdasdasd
                    </div>
                </div>
            </Draggable>
            <Draggable bounds={{ top: 0 }}handle=".mover"filter=".unmover"  size={200}  defaultPosition={{ x: 25, y: 25 }}>
                <div>
                    <div className='mover' >
                        aaaa
                    </div>
                    <div className='unmover'>
                        aaaaaa
                    </div>
                </div>
            </Draggable>
        </div>
    );
}

export default Tuozhuai;