使用 React 拖拽模态框，实现自由移动

在 React 应用程序中，模态框是一个常用的组件，它可以弹出额外的信息或表单，而不会中断主界面。让模态框可拖拽，可以提高用户体验，允许他们根据自己的需要轻松地重新定位模态框。

实现 React 中模态框的拖拽功能需要一些技巧，但它是一个相当简单的过程。以下是一个逐步指南，帮助您轻松完成：

步骤 1：安装依赖项

首先，使用 npm 或 yarn 安装所需的依赖项：

npm install react-draggable

步骤 2：创建可拖拽组件

接下来，创建一个可拖拽组件，它将包裹您的模态框内容。这里我们使用 react-draggable 库来实现拖拽功能：

import { Draggable } from "react-draggable";

const DraggableModal = ({ children }) => {
  return (
    <Draggable handle=".ant-modal-header">
      {children}
    </Draggable>
  );
};

请注意，我们使用了 .ant-modal-header 作为处理程序，这意味着您可以通过拖动模态框标题栏来重新定位模态框。

步骤 3：包裹模态框内容

现在，将您的模态框内容包裹在可拖拽组件中：

import DraggableModal from "./DraggableModal";

const MyModal = () => {
  return (
    <DraggableModal>
      {/* 您的模态框内容 */}
    </DraggableModal>
  );
};

步骤 4：使用 Modal 组件

最后，在您的 React 应用程序中使用 Modal 组件，并将 DraggableModal 组件传递给 content 道具：

import { Modal } from "antd";

const App = () => {
  return (
    <Modal
      visible={visible}
      title="可拖拽模态框"
      content={<DraggableModal />}
      footer={null}
    />
  );
};

现在，当您打开模态框时，您将能够通过拖动标题栏来轻松地重新定位它。

---