"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>
<Modal
title={
<div
style={{
width: '100%',
cursor: 'move',
}}
onMouseOver={() => {
if (disabled) {
this.setState({
disabled: false,
});
}
}}
onMouseOut={() => {
this.setState({
disabled: true,
});
}}
// fix eslintjsx-a11y/mouse-events-have-key-events
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
onFocus={() => {}}
onBlur={() => {}}
// end
>
Draggable Modal
</div>
}
visible={visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
modalRender={modal => (
<Draggable
disabled={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 and
miracles.
</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 and
miracles.
</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;
}