当前位置: 首页 > Web前端 > JavaScript

Day18-100react-draggable实现组件拖动功能

时间:2023-03-27 00:14:56 JavaScript

1、需求是在页面实现弹窗的拖拽功能。基本逻辑用原手写的时候可以实现,但是拖拽双击的时候会有bug。~2。周下载量300w+2.1支持各种拖放情况下的demo实现2.1支持各种拖放情况下的demo实现;大约有十几种;2.2支持React16.3+2.3基础代码

我现在可以四处移动了!
3.演示示例//Copyright2021zhaoardenimportReactfrom'react';importDraggablefrom'react-draggable';//默认导入{Modal,Button}from'antd';import"antd/dist/antd.css";classDragableextendsReact.Component{constructor(props){super(props);this.state={visible:false}}componentDidMount(){};render(){const{visible}=this.stateconstclickName=()=>{this.setState({visible:true});console.log('clickName');}consthandleOk=()=>{这个.setState({visible:false});};consthandleCancel=()=>{this.setState({visible:false});};返回

学习,{this.props.name}

PrimaryButton
我现在可以移动了!
;}}导出默认可拖动;runnableDemo的GitHub仓库https://github.com/iguoxing/r...参考资料https://www.npmjs.com/package...