react-draggable 是一个可以让你拖动元素的 React 组件库

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

import Draggable from "react-draggable";

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

---

✅ 最基础的使用方式

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

const MyComponent = () => {
  return (
    
      

        拖我一下！
      
    
  );
};

export default MyComponent;

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

---

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

属性名	作用	示例
axis	限制拖动方向	axis="x" 只允许水平拖动；axis="y" 只允许垂直拖动
handle	指定哪个子元素可拖动	handle=".title" 表示只有 .title 区域可以拖动
bounds	限定拖动范围	bounds="parent" 表示只在父容器内可拖
defaultPosition	设置初始位置	defaultPosition={{ x: 100, y: 50 }}
position	设置固定位置（配合 onDrag 控制）	用于受控组件
onStart / onDrag / onStop	拖动事件回调	可以打印位置，做自定义逻辑

---

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

 {
    console.log("停止拖动，位置：", data.x, data.y);
  }}
>
  

    

      这里是标题（可拖）
    
    
内容区域（不能拖）
  

---

提醒

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

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

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

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