"antd":"^4.9.4"时，可以直接使用如下代码：
import React, { Component } from "react";import { Modal, Button } from 'antd';import Draggable from 'react-draggable';class Drag extends Component {constructor(props) {super(props);this.state = {visible: false,disabled: true,bounds: { left: 0, top: 0, bottom: 0, right: 0 },};}draggleRef = React.createRef();showModal = () => {this.setState({visible: true,});};handleOk = e => {console.log(e);this.setState({visible: false,});};handleCancel = e => {console.log(e);this.setState({visible: false,});};onStart = (event, uiData) => {const { clientWidth, clientHeight } = window?.document?.documentElement;const targetRect = this.draggleRef?.current?.getBoundingClientRect();this.setState({bounds: {left: -targetRect?.left + uiData?.x,right: clientWidth - (targetRect?.right - uiData?.x),top: -targetRect?.top + uiData?.y,bottom: clientHeight - (targetRect?.bottom - uiData?.y),},});};render() {const { bounds, disabled, visible } = this.state;return (<><Button onClick={this.showModal}>Open Draggable Modal</Button><Modaltitle={<divstyle={{width: '100%',cursor: 'move',}}onMouseOver={() => {if (disabled) {this.setState({disabled: false,});}}}onMouseOut={() => {this.setState({disabled: true,});}}// fix eslintjsx-a11y/mouse-events-have-key-events// /jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.mdonFocus={() => {}}onBlur={() => {}}// end>Draggable Modal</div>}visible={visible}onOk={this.handleOk}onCancel={this.handleCancel}modalRender={modal => (<Draggabledisabled={disabled}bounds={bounds}onStart={(event, uiData) => this.onStart(event, uiData)}><div ref={this.draggleRef}>{modal}</div></Draggable>)}><p>Just don't learn physics at school and your life will be full of magic andmiracles.</p><br /><p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p></Modal></>);}}export default Drag;
"antd":"^3.26.16"，低版本antd无法实现拖拽，所以我自己写了一个modal，下面为完整代码
import React, { Component } from "react";import { Button, Icon } from 'antd';import Draggable from 'react-draggable';import "./Draggable.css";class Drag extends Component {constructor(props) {super(props);this.state = {visible: false,};}showModal = () => {this.setState({visible: true,});};handleOk = e => {this.setState({visible: false,});};handleCancel = e => {this.setState({visible: false,});};render() {const { visible } = this.state;return (<><Button onClick={this.showModal}>Open Draggable Modal</Button>{visible&&<div className="drag_modal_container"><div className="drag_modal_mask"></div><div className="drag_modal_wrap"><Draggable><div className="drag_modal"><div className="drag_modal_content"><button className="drag_modal_close"><span className="drag_modal_close_icon"><Icon type="close" onClick={this.handleCancel}/></span></button><div className="drag_modal_header"><div className="drag_modal_title">Draggable Modal</div></div><div className="drag_modal_body"><p>Just don't learn physics at school and your life will be full of magic andmiracles.</p><br /><p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p></div><div className="drag_modal_footer"><Button onClick={this.handleCancel}>Cancel</Button><Button type="primary" className="drag_right_button" onClick={this.handleOk}>OK</Button></div></div></div></Draggable></div></div>}</>);}}export default Drag;
Draggable.css
.drag_modal_container{cursor: move;}.drag_modal_mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1000;height: 100%;background-color: rgba(0, 0, 0, 0.45);}.drag_modal_wrap{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1000;overflow: auto;outline: 0;}.drag_modal{width: 520px;padding: 0;color: rgba(0, 0, 0, 0.65);font-size: 14px;font-variant: tabular-nums;line-height: 1.5;list-style: none;position: relative;top: 100px;margin: 0 auto;padding-bottom: 24px;pointer-events: none;}.drag_modal_content{position: relative;background-color: #fff;background-clip: padding-box;border: 0;border-radius: 4px;box-shadow: 0 4px 12px rgb(0 0 0 / 15%);pointer-events: auto;}.drag_modal_close{position: absolute;top: 0;right: 0;z-index: 10;padding: 0;color: rgba(0, 0, 0, 0.45);font-weight: 700;line-height: 1;text-decoration: none;background: transparent;border: 0;outline: 0;cursor: pointer;transition: color 0.3s;}.drag_modal_close_icon{display: block;width: 56px;height: 56px;font-size: 16px;font-style: normal;line-height: 56px;text-align: center;text-transform: none;text-rendering: auto;}.drag_modal_header{padding: 16px 24px;color: rgba(0, 0, 0, 0.65);background: #fff;border-bottom: 1px solid #e8e8e8;border-radius: 4px 4px 0 0;}.drag_modal_title{margin: 0;color: rgba(0, 0, 0, 0.85);font-weight: 500;font-size: 16px;line-height: 22px;}.drag_modal_body{padding: 24px;font-size: 14px;line-height: 1.5;}.drag_modal_footer{padding: 10px 16px;text-align: right;background: transparent;border-top: 1px solid #e8e8e8;border-radius: 0 0 4px 4px;}.drag_right_button{margin-left: 8px;}
