react-draggable 是一个可以让你拖动元素的 React 组件库，使用起来其实很简单。你已经有了这行引入代码：

import Draggable from "react-draggable";

现在我们来看看怎么实际用它 👇

✅ 最基础的使用方式

import React from "react";
import Draggable from "react-draggable";

const MyComponent = () => {
  return (
    <Draggable>
      <div
        style={{
          width: 200,
          height: 100,
          backgroundColor: "lightblue",
          padding: 10,
          cursor: "move",
        }}
      >
        拖我一下！
      </div>
    </Draggable>
  );
};

export default MyComponent;

💡 效果：你就可以用鼠标拖动这个蓝色盒子啦。

🧠 常用参数介绍（通俗理解）

🛠 示例：只允许横向拖动 + 只允许标题拖动 + 限制区域

<Draggable
  axis="x"
  handle=".drag-header"
  bounds="parent"
  defaultPosition={{ x: 0, y: 0 }}
  onStop={(e, data) => {
    console.log("停止拖动，位置：", data.x, data.y);
  }}
>
  <div style={{ width: 300, height: 150, background: "#eee" }}>
    <div className="drag-header" style={{ background: "#ccc", padding: 8 }}>
      这里是标题（可拖）
    </div>
    <div style={{ padding: 10 }}>内容区域（不能拖）</div>
  </div>
</Draggable>

🔧 提醒

如果你发现 拖动不流畅或卡住，尤其在嵌套组件（如弹窗、嵌套容器）中，记得：

1. 父元素不能设置 overflow: hidden（可能限制渲染）

2. 容器最好是 position: relative，让 bounds="parent" 正常工作

3. Draggable 最好只包裹一个元素（可以是一个大的 div）