Day 180/200 react-draggable 实现组件拖拽功能

1、需求

想实现页面弹窗的拖拽功能，原生手写时，基本逻辑能实现，但是拖拽双击操作时，会有bug，待解决，就想着看看有没有合适的组件，发现还真有~

2、介绍

周下载量300w+

2.1支持有各种拖拽情况的Demo实现

2.2支持React16.3+

2.3 基本代码

<Draggable>
  <div>I can now be moved around!</div>
</Draggable>

3、Demo样例

// Copyright 2021 zhaoarden
import React from 'react';
import Draggable from 'react-draggable'; // The default
import { Modal,Button } from 'antd';
import "antd/dist/antd.css";
class Dragable extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            visible: false
        }
    }
    componentDidMount(){
    };
    render() {
        const {visible}=this.state
        const clickName=()=>{
            this.setState({visible:true});
            console.log('clickName');
        }
        const handleOk = () => {
            this.setState({visible:false});
        };
        const handleCancel = () => {
            this.setState({visible:false});
        };
        return <div>
            <h1>Learn, {this.props.name}</h1>
            <Button type="primary"  onClick={clickName}>Primary Button</Button>
            <Modal title="Basic Modal" visible={visible} onOk={handleOk} onCancel={handleCancel}>
                <Draggable>
                    <div>I can now be moved around!</div>
                </Draggable>
            </Modal>
        </div>;
    }
}
export default Dragable;

可运行的Demo的GitHub仓库
https://github.com/iguoxing/react-ts

参考资料

https://www.npmjs.com/package/react-draggable