关于javascript:Day-18100-reactdraggable-实现组件拖拽功能

4次阅读

共计 1068 个字符，预计需要花费 3 分钟才能阅读完成。

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

周下载量 300w+

2.1 反对有各种拖拽状况的 Demo 实现

2.1 反对有各种拖拽状况的 Demo 实现；大略十几种；

2.2 反对 React16.3+

2.3 根本代码

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

// 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/r…

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

正文完