改造antd的Modal组件使其可拖拽

最近几个月在做一个react的项目，项目做到了百分之八十，然后业务要求项目里面的模态框可以拖拽，呵呵，早不提，晚不提，偏偏现在提，尽管我心里骂了一万遍，可是还是只能老老实实搞啊，毕竟谁叫人家是上帝，吾等凡人只能任其宰割，不说了，说多了都是泪！

项目用的ui框架是antd-design,相信开发过react项目的都对它不陌生，几乎是react项目首选的ui库，毕竟阿里出厂，质量保证，但是坑爹的是它的Modal组件没有拖拽功能，而且官方明确表示，将来也没有支持的计划，在github上跟踪相关issue, 的确找到了几个大神改造后的版本，我都一一验证了，但是总有各种各样的问题，没办法，只能自己动手实现了，时间比较紧张，花了大半天时间撸出来的，比较简单粗暴，主要实现了下面的功能

1. 鼠标点击title区域可以开始拖拽，鼠标抬起停止拖拽
2. 模态框只能在可视区内拖动，不会拖出可视区
3. 对于一个页面有多个模态框的情况，先点击A，再点击B,可以让B在A的上面，如果项目中的模态框不设置蒙层，那么可以实现点击谁就出现在上面

待完善：

1. Modal的center属性必须是true,即垂直居中，否则无法准确计算出拖拽原点
2. 拖拽不够流畅

友情使用提示

1. 对于一个页面有多个模态框的情况,，比如 a -> b -> c,那么一定要给 a的zIndex设置大于1000的数字，后续的b,c数值依次变大，即保证 c > b > a > 1000，否则点击会出现错乱
2. 模态框的自定义title的类别忘记添加cousor:move，不然看起来怪怪的，哈哈

anyway, 我只是分享我的思路出来给大家，后续遇到问题大家可以一起讨论解决

上面的功能基本满足我们项目的需求了，下面粘贴我的代码，重要的地方我都写注释了，看不懂的小伙伴欢迎留言给我，有时间我会尽力帮忙解答

import React from "react";
import {Modal} from "antd";

// 可控长度的随机数拼接时间戳成产唯一id
const createUniqID = length=>Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);

class AntdDragModal extends React.PureComponent {
    constructor(props) {
        super(props);
        this.id = createUniqID(10);
        this.dragWrapDom = null;// 包裹拖拽元素的元素
        this.dragDom = null // 拖拽的目标元素，在Modal组件中对应class为.antd-modal的元素
        this.dragging = false; // 是否拖拽的状态标志
        this.tLeft = 0; // 
        this.tTop = 0; //   坐标轴
        //modal的左上角相对于屏幕左上角的偏移，也是拖拽原点
        this.points = [0, 0] // 拖拽原点
        this.rect = [0, 0, 0, 0] // 记录可视区宽高和拖拽元素宽高
        this.onMouseDown = this.onMouseDown.bind(this)
        this.onMouseUp = this.onMouseUp.bind(this)
        this.onMouseMove = this.onMouseMove.bind(this)
        this.onContentMoseDown = this.onContentMoseDown.bind(this)
    }

    componentDidMount() {
        this.getDragDom();
    }
    
    componentDidUpdate() {
        this.getDragDom();
    }

    /*
     * 在定时器中使用原生方式来获取dom。
     * */
    getDragDom() {
        setTimeout(() => {
            // 获取唯一标示元素
            const dragWrapDom = document.getElementsByClassName(`d_${this.id}`)[0];
            if (dragWrapDom) {
                this.dragWrapDom = dragWrapDom;
                // 获取真正的拖动元素
                let dragDom = dragWrapDom.getElementsByClassName('ant-modal')[0]
                if (dragDom) {
                    this.dragDom = dragDom
                    let modalWidth = this.dragDom.offsetWidth;
                    let modalHeight = this.dragDom.offsetHeight;
                    let screenWidth = window.innerWidth
                    let screenHeight = window.innerHeight
                   //原点不是屏幕左上角，因为dragDom是相对定位，一开始水平垂直居中，所以原点是dragDom距离屏幕左上角的偏移
                    this.points = [(screenWidth - modalWidth) / 2, (screenHeight - modalHeight) / 2]
                    this.rect = [screenWidth, screenHeight, modalWidth, modalHeight]
                }
            }
        });
    };

    onMouseDown(e) {
        e.preventDefault();
        this.dragging = true; // 激活拖拽状态
        /*
        ** 实现点击后，当前浮层在最上面
        ** 将当前所有涉及可拖拽的浮层的 zIndex = 999
        ** 将当前拖拽目标的 zIndex = 1000
        **/
        const nodeList = document.getElementsByClassName("drag_modal");
        if (nodeList.length > 0) {
            Array.from(nodeList).forEach(item => {
                item.style.zIndex = 999
                if (item.previousElementSibling) {
                    item.previousElementSibling.style.zIndex = 999
                }
            });
            this.dragWrapDom.style.zIndex = 1000;
            /*
            ** 如果mask属性设置为true的话，this.dragWrapDom.previousEleme** ntSibling就是蒙层，蒙层的zIndex需要和自己的模态框同步，否**  则一个页面多个模态框点击会错乱
            */
            if (this.dragWrapDom.previousElementSibling) {
                this.dragWrapDom.previousElementSibling.style.zIndex = 1000;
            }
        }

        /*
        * getBoundingClientRect: 返回一个 DomRect 对象
        *   包含该元素的 top、right、bottom、left 值，对应的是到屏幕上方和左边的距离，单位 px
        * */
        const dragDomRect = this.dragDom.getBoundingClientRect();
        /*
        * e.clientX、e.clientY
        *   获取鼠标的坐标位置
        * */
        // 鼠标按下时和选中元素的坐标偏移,是相对于拖拽原点的
        this.tLeft = e.clientX - dragDomRect.left + this.points[0]; 
        this.tTop = e.clientY - dragDomRect.top + this.points[1];  
        this.onMouseMove(this.dragDom);
    };

    onMouseUp(e) {
        e.preventDefault();
        this.dragging = false; // 停止移动状态
        document.onmousemove = null; // 停止鼠标移动事件
    };

    onMouseMove(node) {
        document.onmousemove = e => {
            e.preventDefault();
            if (this.dragging) {
                let left = e.clientX - this.tLeft
                let top = e.clientY - this.tTop
                // 保证模态框在可视区内
                if (this.points[0] + left > 0 && this.points[0] + left + this.rect[2] < this.rect[0]) {
                    if (this.points[1] + top > 0 && this.points[1] + top + this.rect[3] < this.rect[1]) {
                        node.style.left = left + 'px';
                        node.style.top = top + 'px';
                    }
                }
            }
        };
    };
    // 点击modal的content部分也停止模态框的拖拽
    onContentMoseDown(e) {
        this.dragging = false; 
        document.onmousemove = null; 
    }


    render() {
        const {
            zIndex = 999, children, wrapClassName
            title,
            width = 520, ...otherProps
        } = this.props
        return (
            <Modal
                zIndex={zIndex}
                width={width}
                wrapClassName={`drag_modal d_${this.id} ${wrapClassName}`}
                title={
                    <div
                        className="drag_title"
                        onMouseDown={this.onMouseDown}
                        onMouseUp={this.onMouseUp}
                    >
                        {title}
                    </div>
                }
                {...otherProps}
                centered={true}
            >
                <div onMouseDown={this.onContentMoseDown}>
                    {children}
                </div>
            </Modal>
        );
    }
}

export default AntdDragModal;