小编Edg*_*dly的帖子

我在用react-draggable。

我必须防止元素被拖动到元素之外body，防止文本选择并在可拖动元素内启用表单输入。

import React from "react";
import ReactDOM from "react-dom";
import Draggable from "react-draggable";

function App() {
  return (
    <div className="App">
      <div>Loren ipsum blah blah</div>
      <Draggable bounds='body'>
        <div className="inner">
          <h4>Drag me</h4>
          <textarea/>
          <input />
          <input type='checkbox' />
        </div>
      </Draggable>
   </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上面的代码将阻止文本选择，但不能使用textarea和。input该复选框确实有效。

我尝试使用enableUserSelectHack={false}来启用内部的表单输入div.inner。尽管输入已启用，但当用户将光标拖动到视口上方时可以选择文本。

有没有办法在使用时限制可拖动元素到主体，禁用文本选择并启用表单输入react-draggable？