如何在反应中拖动输入字段？

Question

我试图在React（我自己的自定义插件）中做同样的事情，就像这样 https://formbuilder.online/

我想知道如何在可拖放区域拖动文本字段。

这是我的代码 https://codesandbox.io/s/blissful-elbakyan-4r7bb

在制作自己的自定义插件时，我不想使用任何表单构建器插件

function App() {
  const onDrop = data => {
    console.log(data);
    // => banana
  };
  return (
    <div className="App">
      <div>
        <ul>
          <Draggable type="fruit" data="banana">
            <li>Text field</li>
          </Draggable>
          <Draggable type="fruit" data="apple">
            <li>Select Box</li>
          </Draggable>
        </ul>
        <Droppable
          style={{ border: "1px solid", height: 400 }}
          types={["fruit"]} // <= allowed drop types
          onDrop={onDrop}
        >
          <ul className="Smoothie" />
        </Droppable>
      </div>
    </div>
  );
}