title: How to drag input field in react?
body: <p>I am trying to make same thing in react (my own custom plugin) same like this
  <a href="https://formbuilder.online/" rel="nofollow noreferrer">https://formbuilder.online/</a></p>
  
  <p>I want to know how I will drag text field in dropable area.</p>
  
  <p>Here is my code
  <a href="https://codesandbox.io/s/blissful-elbakyan-4r7bb" rel="nofollow noreferrer">https://codesandbox.io/s/blissful-elbakyan-4r7bb</a></p>
  
  <p>I don’t want to use any form builder plugin as I am making my own custom plugin</p>
  
  <pre><code>function App() {
    const onDrop = data =&gt; {
      console.log(data);
      // =&gt; banana
    };
    return (
      &lt;div className="App"&gt;
        &lt;div&gt;
          &lt;ul&gt;
            &lt;Draggable type="fruit" data="banana"&gt;
              &lt;li&gt;Text field&lt;/li&gt;
            &lt;/Draggable&gt;
            &lt;Draggable type="fruit" data="apple"&gt;
              &lt;li&gt;Select Box&lt;/li&gt;
            &lt;/Draggable&gt;
          &lt;/ul&gt;
          &lt;Droppable
            style={{ border: "1px solid", height: 400 }}
            types={["fruit"]} // &lt;= allowed drop types
            onDrop={onDrop}
          &gt;
            &lt;ul className="Smoothie" /&gt;
          &lt;/Droppable&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>