title: How can I limit a draggable element to the body, disable text selection and enable form inputs?
body: <p>I am using <code>react-draggable</code>.</p>
  
  <p>I have to prevent the element being dragged outside of the <code>body</code> element, prevent text selection and enable the form inputs inside the draggable element.</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import Draggable from "react-draggable";
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;div&gt;Loren ipsum blah blah&lt;/div&gt;
        &lt;Draggable bounds='body'&gt;
          &lt;div className="inner"&gt;
            &lt;h4&gt;Drag me&lt;/h4&gt;
            &lt;textarea/&gt;
            &lt;input /&gt;
            &lt;input type='checkbox' /&gt;
          &lt;/div&gt;
        &lt;/Draggable&gt;
     &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>The code above will prevent text selection but the <code>textarea</code> and <code>input</code> can not be used.  The checkbox does work.</p>
  
  <p>I have tried using <code>enableUserSelectHack={false}</code> to enable the form inputs inside <code>div.inner</code>.  Although the inputs are enabled text can be selected <em>when</em> the user drags the cursor above the viewport.</p>
  
  <p>Is there a way tolimit a draggable element to the body, disable text selection and enable form inputs while using <code>react-draggable</code>?</p>