React+Ant Design Pro 模态框modal拖动_react antd4 modal draggable弹出框如何实现拖动

先看效果

 先要下载插件：react-draggable

全部代码： 

import React, { useEffect, useRef, useState } from 'react';
import { ModalForm } from '@ant-design/pro-form';
import Draggable from 'react-draggable';
import styles from './style.less';
import SetEfficacyTwo from '../setEfficacy_two';
const addModel = (props) => {
  const { isShow, getIsShow, typeData, data, addConfirmCallBack } = props;
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
 
  const [disabled, setDisabled] = useState(false);
 
  const draggleRef = useRef(null);
  // 效验手机号设置_修改
  const [EfficacyOneModalVisible, setEfficacyOneModalVisible] = useState(false);
  const handleModalVisible = (e) => {
    getIsShow(e);
  };
  const onStart = (_event, uiData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };
  return (
    <ModalForm
      title={
        <div
          onMouseOver={() => {
            if (disabled) {
              setDisabled(false);
            }
          }}
          onMouseOut={() => {
            setDisabled(true);
          }}
          style={{
            width: '100%',
            cursor: 'move',
          }}
        >
          效验手机号设置
        </div>
      }
      width="480px"
      layout="horizontal"
      visible={isShow}
      modalProps={{
        destroyOnClose: true,
        modalRender: (modal) => {
          return (
            <Draggable
              disabled={disabled}
              bounds={bounds}
              onStart={(event, uiData) => onStart(event, uiData)}
            >
              <div ref={draggleRef}>{modal}</div>
            </Draggable>
          );
        },
      }}
      initialValues={data}
      submitter={{
        searchConfig: {
          submitText: '修改',
          resetText: '',
        },
      }}
      // request={async ()=> {
      //   await waitTime(2000);
      //   console.log(listData())
      //   console.log(data)
      //   return data
      // }}
      onVisibleChange={handleModalVisible}
      onFinish={async (value) => {
        console.log(value, 1);
        // addConfirmCallBack(value);
        setEfficacyOneModalVisible(true);
      }}
    >
      <div className="word flex flex_align_center flex_column_normal">
        <div className={styles.phone_num} style={{ marginLeft: '-80px' }}>
          <span className={styles.xing}>*&nbsp;</span>手机所属人&nbsp;
          <span className={styles.font_weight}>李三</span>
        </div>
        <div className={styles.phone_num}>
          <span className={styles.xing}>*&nbsp;</span>手机号码&nbsp;
          <span className={styles.font_weight}>11187850121</span>
        </div>
      </div>
      <SetEfficacyTwo
        isShow={EfficacyOneModalVisible}
        getShow={(e) => setEfficacyOneModalVisible(e)}
      ></SetEfficacyTwo>
    </ModalForm>
  );
};
export default addModel;