Day 18/100 react-draggable 实现组件拖拽功能

1、需求

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

2、介绍

周下载量300w+

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

2.1支持有各种拖拽情况的Demo实现；大概十几种；

2.2支持React16.3+

2.3 基本代码

  
I can now be moved around!

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 

            
Learn, {this.props.name}
            Primary Button
            
                
                    
I can now be moved around!
                
            
        
;
    }
}
export default Dragable;

可运行的Demo的GitHub仓库
https://github.com/iguoxing/r...

参考资料

https://www.npmjs.com/package...