react 利用插件react-draggable实现拖拽功能

下载 插件

yarn add react-draggable / npm i react-draggable

具体属性 参考 react-draggable实现拖拽详解 (xbhp.cn)

引入插件

import Draggable from 'react-draggable'

实现代码

defaultPosition：初始位置

bounds：限制区域

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;