创建可拖拽、调整大小的元素。rnd 的意思是：resizable and draggable。

https://github.com/bokuweb/react-rnd

npm i -S react-rnd

适合 html 编辑器场景。

• 可控制多个元素，配合调整成自定义的画面。
• 可通过 contenteditable 配合实现文字元素拖拽，配合 img 标签实现图片元素拖拽等。
• 可配置 bounds: parent 使其不得超过特定的画布区域（父级区域）。

import { Rnd } from "react-rnd";

const style = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0"
};

<Rnd
  style={style}
  default={{
    x: 0,
    y: 0,
    width: 320,
    height: 200
  }}
>
  Rnd
</Rnd>