antd modal拖拽，自定义modal拖拽react-draggable

迈不过友情╰ 2022-10-30 15:24 576阅读 0赞

"antd": "^4.9.4"时，可以直接使用如下代码：

import React, { Component } from "react";
    import { Modal, Button } from 'antd';
    import Draggable from 'react-draggable';
    class Drag extends Component {
      constructor(props) {
        super(props);
        this.state = {
          visible: false,
          disabled: true,
          bounds: { left: 0, top: 0, bottom: 0, right: 0 },
        };
      }
      draggleRef = React.createRef();
    
      showModal = () => {
        this.setState({
          visible: true,
        });
      };
    
      handleOk = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
      };
    
      handleCancel = e => {
        console.log(e);
        this.setState({
          visible: false,
        });
      };
    
      onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window?.document?.documentElement;
        const targetRect = this.draggleRef?.current?.getBoundingClientRect();
        this.setState({
          bounds: {
            left: -targetRect?.left + uiData?.x,
            right: clientWidth - (targetRect?.right - uiData?.x),
            top: -targetRect?.top + uiData?.y,
            bottom: clientHeight - (targetRect?.bottom - uiData?.y),
          },
        });
      };
      render() {
        const { bounds, disabled, visible } = this.state;
        return (
          <>
            <Button onClick={this.showModal}>Open Draggable Modal</Button>
            <Modal
              title={
                <div
                  style={
       {
                    width: '100%',
                    cursor: 'move',
                  }}
                  onMouseOver={() => {
                    if (disabled) {
                      this.setState({
                        disabled: false,
                      });
                    }
                  }}
                  onMouseOut={() => {
                    this.setState({
                      disabled: true,
                    });
                  }}
                  // fix eslintjsx-a11y/mouse-events-have-key-events
                  // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
                  onFocus={() => {}}
                  onBlur={() => {}}
                  // end
                >
                  Draggable Modal
                </div>
              }
              visible={visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              modalRender={modal => (
                <Draggable
                  disabled={disabled}
                  bounds={bounds}
                  onStart={(event, uiData) => this.onStart(event, uiData)}
                >
                  <div ref={this.draggleRef}>{modal}</div>
                </Draggable>
              )}
            >
              <p>
                Just don't learn physics at school and your life will be full of magic and
                miracles.
              </p>
              <br />
              <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
            </Modal>
          </>
        );
      }
    }
    export default Drag;

"antd": "^3.26.16"，低版本antd无法实现拖拽，所以我自己写了一个modal，下面为完整代码

import React, { Component } from "react";
    import { Button, Icon } from 'antd';
    import Draggable from 'react-draggable';
    import "./Draggable.css";
    class Drag extends Component {
      constructor(props) {
        super(props);
        this.state = {
          visible: false,
        };
      }
    
      showModal = () => {
        this.setState({
          visible: true,
        });
      };
      handleOk = e => {
        this.setState({
          visible: false,
        });
      };
      handleCancel = e => {
        this.setState({
          visible: false,
        });
      };
      render() {
        const { visible } = this.state;
        return (
          <>
            <Button onClick={this.showModal}>Open Draggable Modal</Button>
              {visible&&<div className="drag_modal_container">
                <div className="drag_modal_mask"></div>
                <div className="drag_modal_wrap">
                  <Draggable>
                    <div className="drag_modal">
                      <div className="drag_modal_content">
                        <button className="drag_modal_close">
                          <span className="drag_modal_close_icon">
                          <Icon type="close" onClick={this.handleCancel}/>
                          </span>
                        </button>
                        <div className="drag_modal_header">
                          <div className="drag_modal_title">Draggable Modal</div>
                        </div>
                        <div className="drag_modal_body">
                          <p>
                            Just don't learn physics at school and your life will be full of magic and
                            miracles.
                          </p>
                          <br />
                          <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
                        </div>
                        <div className="drag_modal_footer">
                          <Button onClick={this.handleCancel}>Cancel</Button>
                          <Button type="primary" className="drag_right_button" onClick={this.handleOk}>OK</Button>
                        </div>
                      </div>
                    </div>
                  </Draggable>
                </div>
              </div>
            }
          </>
        );
      }
    }
    export default Drag;

Draggable.css

.drag_modal_container{
        cursor: move;
    }
    .drag_modal_mask{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.45);
    }
    .drag_modal_wrap{
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        overflow: auto;
        outline: 0;
    }
    .drag_modal{
        width: 520px;
        padding: 0;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        position: relative;
        top: 100px;
        margin: 0 auto;
        padding-bottom: 24px;
        pointer-events: none;
    }
    .drag_modal_content{
        position: relative;
        background-color: #fff;
        background-clip: padding-box;
        border: 0;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
        pointer-events: auto;
    }
    .drag_modal_close{
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
        padding: 0;
        color: rgba(0, 0, 0, 0.45);
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        background: transparent;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: color 0.3s;
    }
    .drag_modal_close_icon{
        display: block;
        width: 56px;
        height: 56px;
        font-size: 16px;
        font-style: normal;
        line-height: 56px;
        text-align: center;
        text-transform: none;
        text-rendering: auto;
    }
    .drag_modal_header{
        padding: 16px 24px;
        color: rgba(0, 0, 0, 0.65);
        background: #fff;
        border-bottom: 1px solid #e8e8e8;
        border-radius: 4px 4px 0 0;
    }
    .drag_modal_title{
        margin: 0;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
    }
    .drag_modal_body{
        padding: 24px;
        font-size: 14px;
        line-height: 1.5;
    }
    .drag_modal_footer{
        padding: 10px 16px;
        text-align: right;
        background: transparent;
        border-top: 1px solid #e8e8e8;
        border-radius: 0 0 4px 4px;
    }
    .drag_right_button{
        margin-left: 8px;
    }