React如何将元素拖放到区域中以及可拖动元素在区域中

Question

我有一个菜单项，我从菜单中选择一个项并下拉一个区域，然后可以在该区域内拖动和移动该元素。所以现在我使用react-rnd，它扭曲了react-draggable，但是我不知道拖动一个项目，即当下拉菜单上仍然有一个项目时，以及在拖放时不在两个区域之间。

我想喜欢视频：https://www.youtube.com/watch?v=XKthnJT2jNc

这是我的代码

https://codesandbox.io/s/react-rnd-jyxyj?file=/src/App.js

import React from "react";
import "./styles.css";
import { Rnd } from "react-rnd";

const style = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0",
  position: "absolute"
};
export default function App() {
  return (
    <div className="App">
      <div style={{ height: 150, borderWidth: 1, borderStyle: "solid" }}>
        <Rnd
          style={style}
          handle="handle"
          // bounds="body"
          // bounds="parent"
          default={{
            x: 0,
            y: 0,
            width: 100,
            height: 50
          }}
          draggableProps={{ allowAnyClick: true }}
        >
          Rnd
        </Rnd>
      </div>
      <div
        style={{
          height: 300,
          // width: 600,
          // position: "relative",
          borderWidth: 1,
          borderStyle: "solid"
        }}
      >
        <Rnd
          style={style}
          handle="handle"
          // bounds="body"
          bounds="parent"
          default={{
            x: 0,
            y: 0,
            width: 200,
            height: 150
          }}
          draggableProps={{ allowAnyClick: true }}
        >
          Rnd
        </Rnd>
      </div>
    </div>
  );
}

谢谢！