如何将可拖动元素限制在主体上,禁用文本选择并启用表单输入?

时间:2018-09-28 15:23:02

标签: javascript reactjs draggable

我正在使用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);

上面的代码将阻止文本选择,但是不能使用textareainput。该复选框确实起作用。

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

在使用react-draggable时是否可以将可拖动元素限制在正文中,禁用文本选择并启用表单输入?

2 个答案:

答案 0 :(得分:0)

利用React state并创建一个按钮切换以允许/禁用拖动(同时,这会对输入产生反作用)。

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

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

或者,使用:

bounds="parent"

以限制节点的offsetParent中的移动(在下面的示例中,它是height的{​​{1}}和width)。

更多信息here

工作示例:https://codesandbox.io/s/k5n52xq70r(在<div className="container">样式表中指定的限制为heightwidth

components / App.js

styles.css

styles.css

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 }}>{!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>
    );
  };
}

答案 1 :(得分:0)

在可拖动组件中

设置 bounds =“ parent” 。然后,这将不允许您将直接父元素 element 的宽度和高度

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

    </Draggable>
   </div>