react实现拖拽模态框

React实现拖拽模态框攻略

1. 概述

在React中实现拖拽模态框，我们需要通过捕捉鼠标事件来实现拖拽功能，同时使用状态（state）来控制模态框的位置。

2. 步骤

2.1 创建拖拽组件

首先，我们需要创建一个拖拽组件，用于包裹模态框组件，以实现拖拽的功能。

import React, { useState, useEffect } from "react";

const DraggableModal = ({ children }) => {
  const [dragging, setDragging] = useState(false);
  const [pos, setPos] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      if (!dragging) return;
      const newX = e.pageX - pos.x;
      const newY = e.pageY - pos.y;
      // 更新位置
      setPos({ x: newX, y: newY });
    };

    const handleMouseUp = () => {
      if (dragging) {
        // 停止拖拽
        setDragging(false);
      }
    };

    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);

    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [dragging, pos]);

  const handleMouseDown = (e) => {
    // 开始拖拽，记录初始位置与偏移量
    setDragging(true);
    setPos({
      x: e.pageX - pos.x,
      y: e.pageY - pos.y,
    });
  };

  return (
    <div
      style={{ position: "absolute", top: pos.y, left: pos.x }}
      onMouseDown={handleMouseDown}
    >
      {children}
    </div>
  );
};

export default DraggableModal;

2.2 使用拖拽组件

接下来，我们可以使用上述创建的拖拽组件来实现拖拽模态框效果。

import React from "react";
import DraggableModal from "./DraggableModal";

const App = () => {
  return (
    <div>
      <DraggableModal>
        <div
          style={{
            width: "300px",
            height: "200px",
            backgroundColor: "white",
            border: "1px solid gray",
          }}
        >
          模态框内容
        </div>
      </DraggableModal>
    </div>
  );
};

export default App;

3. 示例说明

示例1

在示例1中，我们实现了一个简单的拖拽模态框。用户可以通过拖拽模态框的标题栏来改变模态框的位置，实现拖拽效果。

<DraggableModal>
  <div
    style={{
      width: "300px",
      height: "200px",
      backgroundColor: "white",
      border: "1px solid gray",
    }}
  >
    模态框内容
  </div>
</DraggableModal>

示例2

在示例2中，我们在拖拽模态框的基础上，添加了一个按钮，点击按钮可以打开或关闭模态框。

const App = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const handleToggleModal = () => {
    setModalOpen(!modalOpen);
  };

  return (
    <div>
      <button onClick={handleToggleModal}>
        {modalOpen ? "关闭模态框" : "打开模态框"}
      </button>
      {modalOpen && (
        <DraggableModal>
          <div
            style={{
              width: "300px",
              height: "200px",
              backgroundColor: "white",
              border: "1px solid gray",
            }}
          >
            模态框内容
          </div>
        </DraggableModal>
      )}
    </div>
  );
};

在示例2中，通过useState来管理模态框的打开状态，并通过一个按钮来控制模态框的打开与关闭。当模态框打开时，才呈现拖拽效果。

以上是使用React实现拖拽模态框的完整攻略，希望对你有帮助！