react-draggable 完整中文文档

react-draggable 是一个 React 组件，它可以让你轻松地实现拖拽功能。以下是 react-draggable 完整中文文档：

## 安装

你可以使用 npm 或者 yarn 安装 react-draggable：

使用 npm：

npm install react-draggable --save

使用 yarn：

yarn add react-draggable

## 使用

使用 react-draggable 很简单，只需要将需要被拖拽的元素包裹在 Draggable 组件中即可：

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

class MyComponent extends React.Component {
  render() {
    return (
      <Draggable>
        <div>我可以被拖拽</div>
      </Draggable>
    );
  }
}

这个例子中，`<div>` 元素就可以被拖拽了。当用户拖拽这个元素时，它的位置会随着鼠标移动而改变。

## Props

react-draggable 支持一些属性来控制拖拽的行为：

### axis

这个属性可以限制拖拽的方向，它的值可以是 "x"、"y" 或者 "both"，默认值是 "both"。

<Draggable axis="x">
  <div>我只能水平拖拽</div>
</Draggable>

### handle

这个属性可以指定一个拖拽的手柄，只有手柄被拖拽时，元素才会跟随鼠标移动。

<Draggable handle=".handle">
  <div>
    <div className="handle">我是手柄</div>
    <div>我只能通过手柄拖拽</div>
  </div>
</Draggable>

### defaultPosition

这个属性可以指定元素的初始位置。

<Draggable defaultPosition={{ x: 100, y: 100 }}>
  <div>我初始位置在 (100, 100)</div>
</Draggable>

### position

这个属性可以动态地指定元素的位置。

<Draggable position={{ x: this.state.x, y: this.state.y }}>
  <div>我的位置是动态的</div>
</Draggable>

### onStart、onDrag、onStop

这三个属性分别表示开始拖拽、拖拽中、停止拖拽时的回调函数。

<Draggable
  onStart={() => console.log("开始拖拽")}
  onDrag={() => console.log("拖拽中")}
  onStop={() => console.log("停止拖拽")}
>
  <div>我可以触发回调函数</div>
</Draggable>

## 参考文献

- [react-draggable 官方文档](https://github.com/mzabriskie/react-draggable)