Antd Modal 可拖拽移动

目标：

实现antd Modal 弹窗或者其他弹窗的点击标题进行拖拽的效果

一 、内容：

1.使用antd Modal 组件,要想改变位置需要改变Modal style 的left 和top属性,其默认值分别为0,100

2.Modal 的标题可以使组件,给这个标题组件添加一个鼠标点击事件,记录下鼠标点击的位置;

当鼠标移动的时候计算鼠标当前的位置和初始的位置差就是弹窗相对于初始位置的移动距离,从而计算出弹窗的实际位置,

通过state 记录弹窗实际位置,从而更新弹窗的style,

3.计算鼠标的位置防止移除屏幕视图窗口

---

二、代码：

import React, { Component } from 'react';
import { Button, Modal } from 'antd';

class MoveModal extends Component {
  constructor(props) {
    super(props); // Modal 的初始值
    this.state = {
      styleTop: 100,
      styleLeft: 0,
    };
  }

  // 计算是否超出屏幕;超出后停止移动监听
  inWindow = (left, top, startPosX, startPosY) => {
    const H = document.body.clientHeight;
    const W = document.body.clientWidth;
    if (
      (left < 20 && startPosX > left) ||
      (left > W - 20 && startPosX < left) ||
      (top < 20 && startPosY > top) ||
      (top > H - 20 && startPosY < top)
    ) {
      document.body.onmousemove = null;
      document.body.onmouseup = null;
      return false;
    }
    return true;
  };

  onMouseDown = (e) => {
    e.preventDefault(); // 记录初始移动的鼠标位置
    const startPosX = e.clientX;
    const startPosY = e.clientY;
    const { styleLeft, styleTop } = this.state; // 添加鼠标移动事件
    document.body.onmousemove = (e) => {
      const left = e.clientX - startPosX + styleLeft;
      const top = e.clientY - startPosY + styleTop;
      if (this.inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
        this.setState({
          styleLeft: left,
          styleTop: top,
        });
      }
    }; // 鼠标放开时去掉移动事件
    document.body.onmouseup = function () {
      document.body.onmousemove = null;
    };
  };

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

  render() {
    const { styleLeft, styleTop, visible } = this.state;
    const style = { left: styleLeft, top: styleTop };

    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          visible={visible}
          onCancel={()=>this.setState({visible:false})}
          style={style}
          footer={null}
          title={
            <div style={{ width: '100%', cursor: 'move' }} onMouseDown={this.onMouseDown}>
              标题
            </div>
          }
        >
          移动
        </Modal>
      </div>
    );
  }
}
export default MoveModal;

注意

方法二：
React Draggable 是 react 生态中，最好用的拖拽实现库之一。如果你的应用中需要实现拖拽功能，可以尝试用 react-draggable，它可以满足多数情况下的拖拽需求，比如一个弹出设置浮窗，可以相互遮挡的容器之类。在所有 react 拖拽库里(即 react dnd, drag and drop)，react-draggable 算是把功能性和易用性平衡得最好的拖拽库了

React Draggable插件:https://www.npmjs.com/package/react-draggable