antd modal 拖动_让Antd Modal变成可拖动弹窗

思路：

1、首先需要两个DIV，一个是和视口一样大drag-mask，绑定mouseMove事件和mouseUp事件，另一个是和Modal一样大的drag-target，绑定mouseDown事件；

2、已知Modal的样式.ant-modal{position:relative;top:100px;left:0px;}，通过更改top、left改变Modal位置；

3、mouseDown事件时，记录坐标

handleMoseDown=(evt)=>{this.setSate({

dragging:true,

preX:evt.pageX,

preY:evt.pageY,

})

}

4、mouseMove事件时，根据上一次的坐标和这一次的坐标计算Modal的新位置；

handleMouseMove=(evt)=>{

const {preX,preY,styleLeft,styleTop}= this.state;

const left= styleLeft + (evt.pageX-preX);

const top= styleTop + (evt.pageY-preY);this.setState({

preX:evt.pageX,

preY:evt.pageY,

styleLeft:left,

styleTop:top,

})

}

DEMO代码如下：

import React, { Component } fr