Antd Modal 可拖拽移动

一 目标:

实现antd Modal 弹窗或者其他弹窗的点击标题进行拖拽的效果

二 准备及思录:　　

 　1.使用antd  Modal 组件,要想改变位置需要改变Modal style 的left 和top属性,其默认值分别为0,100

　 2.Modal 的标题可以使组件,给这个标题组件添加一个鼠标点击事件,记录下鼠标点击的位置;

　　当鼠标移动的时候计算鼠标当前的位置和初始的位置差就是弹窗相对于初始位置的移动距离,从而计算出弹窗的实际位置,

　　通过state 记录弹窗实际位置,从而更新弹窗的style,

　3.计算鼠标的位置防止移除屏幕视图窗口

三 代码实现:

import { PureComponent } from 'react';
import { Modal } from 'antd';

class MoveModal extends PureComponent {
    constructor(props) {
        super(props)
　　　　　//Modal 的初始值
        this.state = {
            styleTop: 100,
            styleLeft: 0,
        }
    }

   //计算是否超出屏幕;超出后
 　　 inWindow = (left, top, startPosX, startPosY) => {
        let H = document.body.clientHeight;
        let W = document.body.clientWidth;

          if ((left < 20 && startPosX > left) || (left > W - 20 && startPosX < left) ||

             (top < 20 && startPosY > top) || ((top > H - 20 && startPosY < top))) {

             document.body.onmousemove = null;

             document.body.onmouseup = null;

         }

      }

   onMouseDown = e => { e.preventDefault(); 
　　　　 //记录初始移动的鼠标位置 
        let startPosX = e.clientX;
        let startPosY = e.clientY; 
        const { styleLeft, styleTop } = this.state;
　　　　 //添加鼠标移动事件
        document.body.onmousemove = e => {
            let left = e.clientX - startPosX + styleLeft;
            let top = e.clientY - startPosY + styleTop;

　　　　　　　　 if(this.inWindow(e.clientX, e.clientY, startPosX, startPosY)) {

                this.setState({

                    styleLeft: left,

                    styleTop: top,

                })

            }

        };
　　　　//鼠标放开时去掉移动事件
        document.body.onmouseup = function () {
            document.body.onmousemove = null;
        };
    };

    render() {
        const {  styleLeft, styleTop } = this.state;
        const style = { left: styleLeft, top: styleTop }
        return <Modal
            visible={visible}
            onCancel={this.props.onCancel}
            style={style}
            footer={null}
            title={<div style={{  "100%", cursor: "move" }} onMouseDown={this.onMouseDown} >标题</div>}
        >
            <div>内容</div>
        </Modal >
    }
}
export default MoveModal