实现ant-desgin里的Modal组件拖拽

在使用Modal组件时,新增了一个需求,让他能够实现拖拽的效果
1.首先找到控制modal的类名

让这个div框变为一个绝对定位,它默认是相对定位,然后可以给它一个高度,如果不给,就是我图中的样子了.在index.less文件里面给它样式,引入
index.less

.ant-modal-content{
     
  position: absolute !important;
  width: 480px;
}

2.封装一个drag.js
drag.js

class DragBox {
     
  constructor() {
     
      this.el = null;
  }
  init(cls) {
     
      // this.el = document.getElementById(cls);
      this.el = document.getElementsByClassName(cls)[0];
      return this;
  }
  DragStart() {
     
     this.el.onmousedown = (evt) => {
     
          var e = evt || window.event;
          var disX = e.pageX -this.el.offsetLeft;
          var disY = e.pageY - this.el.offsetTop;
          this.DragIng(disX, disY);
          this.DragEnd()
      }
  }
  DragIng(x, y) {
     
      document.onmousemove = (evt) => {
     
          var e = evt || window.event;
          this.el.style.left = e.pageX - x + 'px';
          this.el.style.top = e.pageY - y + 'px';
      }
  }
  DragEnd() {
     
      document.onmouseup=() => {
     
          document.onmouseup = document.onmousemove = null;
      }
  }
}

export default new DragBox()

3.因为我组件内容是另外写在了一个js文件里面.在该js组件引入封装好的drag.js组件,并且调用
toast.js

import React, {
      Component } from 'react'
import {
      Input} from 'antd';
import Drag from './drag'


class Toast extends React.Component {
     
    constructor() {
     
        super()

    }
   
    componentDidMount=() => {
     
        Drag.init("ant-modal-content").DragStart()
    }
    
    render() {
     
        return (
            <div>
                <Input 
                    placeholder="请输入"
                    style={
     {
      width: '150px' }}
                />
            </div>
        )
    }
}

export default Toast

4.父组件代码如下
index.js

import React, {
      Component } from 'react'
import {
      Input, Modal } from 'antd';
import Toast from './toast'
import './index.less'

class Test extends React.Component {
     
    constructor() {
     
        super()
        this.state = {
     
            jobNumber: '',
            visible: false

        }
    }


    handleNumber = (e) => {
     
        console.log(e.target.value)
        this.setState({
     
            jobNumber: e.target.value
        })
    }

    handleChangeValue = () => {
     
        this.setState({
     
            visible: true
        });
    };

    handleOk = e => {
     
        console.log(e);
        this.setState({
     
            visible: false
        });
    };

    handleCancel = e => {
     
        console.log(e);
        this.setState({
     
            visible: false
        });
    };


    render() {
     
        return (
            <div>

                <Input onChange={
     this.handleNumber}
                    placeholder="请输入"
                    style={
     {
      width: '150px' }}
                    value={
     this.state.jobNumber}
                />

                <button className="red"
                    onClick={
     this.handleChangeValue}
                    type="primary"
                // style={
     {position:'absolute'}}
                >
                    传值
                </button>
                <Modal
                    onCancel={
     this.handleCancel}
                    onOk={
     this.handleOk}
                    title="Basic Modal"
                    visible={
     this.state.visible}
                >
                    <Toast jobNumber={
     this.state.jobNumber} ></Toast>
                </Modal>
            </div>
        )
    }
}

export default Test

然后就可以快乐的移动modal框了