javascript - How can I limit a draggable element to the body, disable text selection and enable form inputs? - Stack Overflow

admin管理员组

文章数量:1345700

I am using react-draggable.

I have to prevent the element being dragged outside of the body element, prevent text selection and enable the form inputs inside the draggable element.

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

The code above will prevent text selection but the textarea and input can not be used. The checkbox does work.

I have tried using enableUserSelectHack={false} to enable the form inputs inside div.inner. Although the inputs are enabled text can be selected when the user drags the cursor above the viewport.

Is there a way tolimit a draggable element to the body, disable text selection and enable form inputs while using react-draggable?

I am using react-draggable.

I have to prevent the element being dragged outside of the body element, prevent text selection and enable the form inputs inside the draggable element.

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

The code above will prevent text selection but the textarea and input can not be used. The checkbox does work.

I have tried using enableUserSelectHack={false} to enable the form inputs inside div.inner. Although the inputs are enabled text can be selected when the user drags the cursor above the viewport.

Is there a way tolimit a draggable element to the body, disable text selection and enable form inputs while using react-draggable?

• javascript
• reactjs
• draggable

Share Improve this question Follow asked Sep 28, 2018 at 15:23 Edgar FriendlyEdgar Friendly 4111 gold badge11 silver badge55 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Utilize React state and create a button toggle to allow/disable dragging (at the same time, this does the inverse effect for inputs).

To limit the draggable area you can either specify it like so:

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

or, use:

bounds="parent"

to restrict movement within the node's offsetParent (in the example below, it's the height and width of <div className="container">) .

More information can be found here.

Working example: https://codesandbox.io/s/k5n52xq70r (limits to height and width specified in the styles.css stylesheet)

ponents/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>
    );
  };
}

styles.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;
}

set bounds="parent" in Draggable ponent. Then this will not allow you to drag outside the immediate parent element width and height

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

    </Draggable>
   </div>

本文标签：