如何将可拖动元素限制为主体、禁用文本选择并启用表单输入？

Question

我在用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？

Answer 1

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

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

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

或者，使用：

bounds="parent"

限制节点的 offsetParent 内的移动（在下面的示例中，它是 的和height）。width<div className="container">

更多信息可以在这里找到。

工作示例： https: //codesandbox.io/s/k5n52xq70r（限制height并width在样式表中指定styles.css）

组件/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: !prevState.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>
    );
  };
}

样式.css

.container {
  height: calc(100vh - 50px);
  width: calc(100vh - 100px);
  padding: 20px;
}

.draggable {
  cursor: -webkit-grab;
  cursor: grab;
}

.uk-input,
.uk-textarea,
.uk-checkbox {
   margin-bottom: 10px;
}