改造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.