antd modal 拖动_Ant-design Modal实现可以拖动的效果

最近项目组在开发的时候提出了一个需求，需要让 ant-design Modal实现能够拖动的功能，研究了一番，基于 and-design Modal自己封装了一个antd-draggable-modal组件。

特性：

支持弹出窗居中打开

支持拖拽 title bar 实现拖拽

支持多层弹窗拖拽

实现原理

要实现 Modal 的拖拽，首先要弄清楚 Modal 的位置跟什么有关系，打开浏览器，通过F12 调试窗口可以看到，Modal 的位置跟 class 属性为 ant-modal-content 的元素有关。

因此接下来的思路就很简单了，通过监听鼠标事件来设置 ant-modal-content 元素的 transform 属性来实现 Modal 位置的调整。

代码如下：

import React, { Component, MouseEvent } from 'react';

import AntdModal, { ModalProps } from 'antd/lib/modal';

import 'antd