antd modal 拖动_如何给Modal之类的组件加上drag事件?

import React from 'react';

import Draggable from 'react-draggable';

import { Button, Spin, Icon, message } from 'antd';

import DialogBus from './dialog-bus'

import '../styles/dialog.css'

import Utils from '../utils/utils';

import { LocaleProvider } from 'antd';

import zhCN from 'antd/lib/locale-provider/zh_CN';

import copy from 'copy-to-clipboard';

/**

弹出多窗口对话框,用法模仿 ant design中modal对话框来的

项目需求:

房源列表上面每点一个就自动产生一个对话框来,不用开始就写在jsx代码里,注意这个:::"divId":::是固定的名称,不要写成别的要不然到时候移除不了这个新产生的div

注意:

1、这时关闭事件不用自己去定义,里面自动处理了关闭事件

2、定义一个组件的时候一定要把这个newdiv带下去, 如定义一个xxx组件:

xxx不传这个newdiv到时候关闭不了

3、如果手工要关闭的就调用: this.refs.informDialog.onClose(); 这里还有一点注意像房源他自己写了取消按钮关闭按钮那么一定要调用我这个方法来关闭窗口，要不然窗口还一直存在，除非你用自带的按钮就不用管了

不是自动用代码来生成对话框直接写到jsx上去,用法跟ant design modal一样, 注意:这时要定义onCancel方法来关闭窗口,上面的那种创建div元素不用去定义

还有一些其他属性见最下面的参数

列表上面弹出多个窗口可以参照房源列表来写，一定要那样写，要不然会有问题

如房源代表调用：

let divId = "HouseFormSpan" + record.id; // 这个id一定要唯一的，因为到时候要拿这个作为底部排序用还要删除

DialogBus.openDialog()

// 注意由于你这里是自己写的关闭按钮事件，一定要调用我的方法来关闭，要不然清除不了创建的对话框窗口,像张超房源取消窗口就是个例子

this.refs.houseDialog.onClose();

*/

let zIndex = 1;

export default class Dialog extends React.Component {

constructor(props) {

super(props);

this.isMin = false;

this.dialogDefaultY = "39px";

this.clientWidth = document.body.clientWidth;

this.clientHeight = document.body.clientHeight;

const {dialogY} = this.props;

this.state = { activeDrags: 0, confirmLoading: false, visible: this.props.visible == undefined ? false : this.props.visible,

height: this.props.height, contPadding: "5px 10px",

dialogStyle: {margin: "0 auto", top: undefined == dialogY ? this.dialogDefaultY: (dialogY+"px"), width: this.props.width},

titleContStyle: {height: "40px", lineHeight: "40px"},

titleStyle: {paddingLeft: "16px", fontSize: "14px"},

iconStyle: {marginRight: "16px"},

controlledPosition: null,

footStyle: {}, maxText: "＋", maxTitle: "最大化"};

}

// 关闭对话框,并移除

onClose = () => {

const {divId} = this.props;

this.setState({confirmLoading: false});

// 这种情况是直接写jsx代码时的关闭方式

if(this.props.onCancel != undefined) {

this.props.onCancel();

}

// 这种是直接创建div元素加到body上去

if (divId != undefined) {

this.setState({visible: false});// 直接创建div元素加到body上去了,要通过内部把他隐藏起来

if (!this.isMin) {

// 当前已经最大化了，准备关闭窗口

DialogBus.closeDialog(this.divId);

} else {

// 当前最小化了，在底部最小化的时候直接关闭，这时候要先移除然后再重新排位置

DialogBus.closeDialog(this.divId);

DialogBus.sortDialog();

}

}

if (this.props.afterClose != undefined) {

this.props.afterClose();

}

}

// 开始拖动

onStart = (e) => {

// 最小化了禁止拖动,注意要返回false才