React结合antd制作可移动的Modal窗口

AoBeiChuan

已于 2023-03-28 21:43:38 修改

阅读量578

点赞数

分类专栏：前端文章标签： react.js javascript 前端前端框架

于 2023-03-28 17:29:21 首次发布

本文链接：https://blog.csdn.net/kitagawa_myouya/article/details/129820771

版权

参考文章：https://segmentfault.com/a/1190000021880340

原文章用的是ts语法，没去了解过ts，这里直接改成了js写法，文件格式为.jsx，在其基础上完善了一下只能在页面视口范围内移动对话框
用法和普通的Modal一样
代码：

import React, {
    Component } from 'react';
import AntdModal from 'antd/lib/modal';
import 'antd/es/modal/style/index.css';

export default class AntDraggableModal extends Component {
   

    constructor(props) {
   
        super(props);
        this.simpleClass = "";
        this.header;
        this.contain;
        this.modalContent;
        this.mouseDownX = 0;
        this.mouseDownY = 0;
        this.deltaX = 0;
        this.deltaY = 0;
        this.translate_x = 0;
        this.translate_Y = 0;
        this.simpleClass = Math.random()
            .toString(36)
            .substring(2);
    }

    handleMove = (event) => {
   
        const deltaX = event.pageX