TS+Hooks二次封装antd Modal，实现可拖拽

---

一、最终效果图

使用Typescript和React Hooks二次封装antd的Modal对话框，实现可拖拽效果，并且满足下面的小细节。最终效果图如下：

小细节:

1. 拖动时鼠标于DIV的相对位置
2. 拖动时选中文字
3. 边界问题
4. 页面失去焦点
5. 销毁时回到原位
   

二、可拖动DIV

在实现Modal对话框拖拽的之前，可以在html页面上先实现一个可拖动的DIV，我是学习了这篇文章可拖动DIV。里面的具体原理细节可以参考这篇文章。

直接通过图的方式表达可能更加直观。主要就是要确定好相对移动距离和边界条件。我的在线测试DEMO

三、封装ModalBox

1. 实现原理

1. 有部分参考了这篇文章，antd Modal的class属性是ant-modal-content，通过这个属性，获得Modal对话框具体左右视图边框的距离contentLeft和contentRight，用于后续的定位。
   
   
2. 相对移动位置

var cx = e.clientX - startPosX + styleLeft,
    cy = e.clientY - startPosY + styleTop;

3. Modal对话框位置再次点击更新
   这里的132就是Modal高度的一半，为了让他销毁后每次都保持在视图中央。如果自己改变宽高度的话，可以再次封装style中的width，就不至于写死了。因为Modal组件关闭的时候，是不会自动销毁的，如果不写下面的代码，会导致再次点开Modal后，还是上次那个位置。这个地方写的不太好，继续优化。

    useEffect(() => {
        return () => {
            setStyleLT({
                styleLeft: 0,
                styleTop: window.innerHeight / 2 - 132
            })
            setFlag(true);
        }
    }, [props.isModalVisible])

2.ModalBox 组件代码

import { Modal } from 'antd';
import { useState, useEffect } from 'react';

interface ModalBoxxProps {
    title: string,
    isModalVisible: boolean,
    handleOk: any,
    handleCancel: any,
    children?: React.ReactNode,
    okText?: string,
    cancelText?: string
}
let content: HTMLDivElement, contentLeft: number = 0, contentRight: number = 0;

const ModalBox: React.FC<ModalBoxxProps> = (props) => {
    const [styleLT, setStyleLT] = useState({
        styleLeft: 0, styleTop: window.innerHeight / 2 - 132
    });
    let [flag, setFlag] = useState<boolean>(true);
    const style = { left: styleLT.styleLeft, top: styleLT.styleTop }

    useEffect(() => {
        return () => {
            setStyleLT({
                styleLeft: 0,
                styleTop: window.innerHeight / 2 - 132
            })
            setFlag(true);
        }
    }, [props.isModalVisible])

    const onMouseDown = (e: any) => {
        e.preventDefault();
        if (flag) {
            content = document.getElementsByClassName("ant-modal-content")[0] as HTMLDivElement;
            contentLeft = content.getBoundingClientRect().left;
            contentRight = content.getBoundingClientRect().right - content.offsetWidth;
            setFlag(false);
        }

        // 记录初始移动的鼠标位置
        const startPosX = e.clientX
        const startPosY = e.clientY;
        const { styleLeft, styleTop } = styleLT
        // 添加鼠标移动事件
        document.onmousemove = (e) => {
            var cx = e.clientX - startPosX + styleLeft,
                cy = e.clientY - startPosY + styleTop;
                
            if (cx < -contentLeft) {
                cx = -contentLeft;
            }
            if (cy < 0) {
                cy = 0;
            }
            if (cx > contentRight) {
                cx = contentRight;
            }

            if (window.innerHeight - cy < content.offsetHeight) {
                cy = window.innerHeight - content.offsetHeight;
            }
            setStyleLT({
                styleLeft: cx,
                styleTop: cy
            })
        } 
        // 鼠标放开时去掉移动事件
        document.onmouseup = function (e) {
            document.onmousemove = null
            if (e.clientX > window.innerWidth || e.clientY < 0 || e.clientX < 0 || e.clientY > window.innerHeight) {
                document.onmousemove = null
            }
        }
    }

    return (
        <Modal
            title={<div
                className='dragBoxBar'
                style={{ height: "100", width: "100%", cursor: 'move', userSelect: "none" }}
                onMouseDown={onMouseDown}
            >
                {props.title}
            </div>}
            visible={props.isModalVisible}
            onOk={props.handleOk}
            onCancel={props.handleCancel}
            style={style}
            wrapClassName='dragBox'
            okText={props.okText}
            cancelText={props.cancelText}
        >
            {props.children}
        </Modal>
    )
}

export default ModalBox;

4. ModalBox组件调用

import { Button } from "antd";
import { useState } from "react";
// 引入组件
import { ModalBox } from "../Components";

interface ListProps {
    name?: string,
    age?: number
}
const List = (props: ListProps) => {
    const [showModal, setShowModal] = useState<boolean>(false)
    const handleModal = () => {
        setShowModal(true);
    }
    const handleOk = () => {
        setShowModal(false);
    };
    const handleCancel = () => {
        setShowModal(false);
    };
    return (
        <>
            <div>列表页组件</div>
            <ModalBox
                title="告警信息"
                isModalVisible={showModal}
                handleOk={handleOk}
                handleCancel={handleCancel}
                okText="确定"
                cancelText="取消"
            >
                <p>告警</p>
                <p>告警</p>
                <p>告警</p>
            </ModalBox>
            <Button onClick={handleModal}>点击弹窗</Button>
        </>
    )
}
export default List;

---

四、总结

Modal每次消失的时候，不太流畅，需要再次优化，如果有好的建议，希望能和我一起交流。(*￣︶￣)