Javascript 如何将可拖动元素限制在正文中，禁用文本选择并启用表单输入？

我正在使用

react draggable

我必须防止元素被拖出

主体

元素之外，防止文本选择，并在可拖出元素内部启用表单输入

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);

从“React”导入React；
从“react dom”导入react dom；
从“react Draggable”导入Draggable；
函数App（）{
返回(
Loren ipsum等等
拖我
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

上述代码将阻止文本选择，但不能使用

textarea

和

输入。复选框确实有效

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

有没有一种方法可以在使用
react draggable
时将可拖动元素限制在正文中，禁用文本选择并启用表单输入？
利用react
state
并创建一个按钮切换以允许/禁用拖动（同时，这会对输入产生相反的效果）

要限制可拖动区域，可以这样指定：

bounds={{left:number，top:number，right:number，bottom:number}

或使用：

bounds=“parent”

限制节点偏移父节点内的移动（在下面的示例中，是
的
高度和
宽度）

可以找到更多信息

工作示例：（限制
样式表中指定的
高度
和
宽度
）

组件/App.js

import React, { Component } from "react";
import Draggable from "react-draggable";

export default class App extends Component {
  state = { disabled: false };

  toggleDraggable = () => this.setState(prevState => ({ disabled: !this.state.disabled }));

  render = () => {
    const { disabled } = this.state;
    return (
      <div className="container">
        <Draggable disabled={disabled} bounds="parent">
          <div style={{ width: 200 }} className={!disabled ? "draggable" : null}>
            <h4 style={{ height: 20, userSelect: "none" }}>{!disabled && "Drag Me"}</h4>
            <textarea disabled={!disabled} className="uk-textarea"/>
            <input disabled={!disabled} className="uk-input" />
            <input className="uk-checkbox" type="checkbox" disabled={!disabled}/>
            <br />
            <button className="uk-button uk-button-primary" onClick={this.toggleDraggable}>
              {disabled ? "Enable" : "Disable"} Drag
            </button>
          </div>
        </Draggable>
      </div>
    );
  };
}

利用React
state
并创建一个按钮切换以允许/禁用拖动（同时，这会对输入产生相反的效果）

要限制可拖动区域，可以这样指定：

bounds={{left:number，top:number，right:number，bottom:number}

或使用：

bounds=“parent”

限制节点偏移父节点内的移动（在下面的示例中，是
的
高度和
宽度）

可以找到更多信息

工作示例：（限制
样式表中指定的
高度
和
宽度
）

组件/App.js

import React, { Component } from "react";
import Draggable from "react-draggable";

export default class App extends Component {
  state = { disabled: false };

  toggleDraggable = () => this.setState(prevState => ({ disabled: !this.state.disabled }));

  render = () => {
    const { disabled } = this.state;
    return (
      <div className="container">
        <Draggable disabled={disabled} bounds="parent">
          <div style={{ width: 200 }} className={!disabled ? "draggable" : null}>
            <h4 style={{ height: 20, userSelect: "none" }}>{!disabled && "Drag Me"}</h4>
            <textarea disabled={!disabled} className="uk-textarea"/>
            <input disabled={!disabled} className="uk-input" />
            <input className="uk-checkbox" type="checkbox" disabled={!disabled}/>
            <br />
            <button className="uk-button uk-button-primary" onClick={this.toggleDraggable}>
              {disabled ? "Enable" : "Disable"} Drag
            </button>
          </div>
        </Draggable>
      </div>
    );
  };
}

在可拖动组件中设置bounds=“parent”。然后，这将不允许您拖动到直接父元素宽度和高度之外

<div sytle={{max-width: 50%;}}>
   <Draggable  bounds="parent"><div style={{ width: 50 }}className={!disabled ? "draggable" : null}>
        <h4 >DragMe</h4>
      </div>

    </Draggable>
   </div>


德拉格姆
在可拖动组件中设置bounds=“parent”。然后，这将不允许您拖动到直接父元素宽度和高度之外

<div sytle={{max-width: 50%;}}>
   <Draggable  bounds="parent"><div style={{ width: 50 }}className={!disabled ? "draggable" : null}>
        <h4 >DragMe</h4>
      </div>

    </Draggable>
   </div>


德拉格姆
工作正常。非常感谢。工作完美。非常感谢。