JavaScript

Draggable div React JS

In this chapter I am going to learn you how to make any HTML element draggable in React. To be honest, when I first thought about it, I thought this is going to be a big task for me. But when I started working on it, believe me it was very easy. And it will be really user friendly . And for the method I have used here, you do not need to be a master in React. Because it is so easy that even a beginner can use it easily. Well whatever it is, you won’t believe it until you use it in your project and it doesn’t work properly, I know. As Linus Torvalds said : “Talk is cheap. Show me the code.”

So Let’s Start

So to make draggable element first we have to install a package. So run this script in terminal.

npm install react-draggable

When this is done, after that whatever div you want to become draggable, just wrap it in and you will be done. Like This:

<Draggable>
  <div>I can now be moved around!</div>
</Draggable>

Note: Don’t forget to import the following script above the file


import ReactDOM from 'react-dom';
import Draggable from 'react-draggable';

Full Code :

// App.js
import React from 'react';
import './App.css';
import Draggable from 'react-draggable';
class App extends React.Component {
  render() {
    return (
      <Draggable>
        <div className="drag-wrapper">
          <divI can now be moved around!</div>
        </div>
      </Draggable>
    );
  }
}
export default App;

Define Axis in Draggable Component

if you want to drag only x axis add new attribute in <Draggable> tag Like this:-

 <Draggable axis="x">
        <div>I can now be moved around!</div>
</Draggable>

and if you want to drag only y axis than you can just add axis=”y” .

Events of React Draggable

Here is the events and callback methods list that i am going to enumerate for the draggable component.

  • onStart: This is called when dragging event invokes.
  • onDrag: Invoked when the drag event is in process.
  • onStop: This event evokes when dragging ends.
  • onMouseUp: This is event is evoked when the mouse is moved before stoping the drag.
  • onMouseDown: Called when the mouse is clicked to begin drag.
  • onTouchEnd: This is called in touch state before the drag ends.
  • onTouchStart: Invoked in touch condition before drag begins.

Implement Events Draggable Element

// App.js
import React from 'react';
import './App.css';
import Draggable from 'react-draggable';
class App extends React.Component {
  eventControl = (event, info) => {
    console.log('Event name: ', event.type);
    console.log(event, info);
  }
  render() {
    return (
      <Draggable
          onDrag={this.eventControl}
          onStart={this.eventControl}
          onStop={this.eventControl}
          onMouseDown={this.eventControl}
          onMouseUp={this.eventControl}
          onTouchStart={this.eventControl}
          onTouchEnd={this.eventControl}>
        <div className="drag-wrapper">
          <div>Hey now you can drag me now.</div>
        </div>
      </Draggable>
    );
  }
}
export default App;

Get React Draggable Element Position

// App.js
import React from 'react';
import './App.css';
import Draggable from 'react-draggable';
class App extends React.Component {
  state = {
    deltaXyPos: {
      x: 0, 
      y: 0
    }
  };
  handleDrag = (e, d) => {
    const { x, y } = this.state.deltaXyPos;
    this.setState({
      deltaXyPos: {
        x: x + d.deltaX,
        y: y + d.deltaY,
      }
    });
  };
  render() {
    const { deltaXyPos } = this.state;
    return (
      <Draggable
        onDrag={this.handleDrag}>
        <div className="drag-wrapper">
          <p>Drag position:</p>
          <div>
            <strong>x: {deltaXyPos.x.toFixed(0)}, </strong>
            <strong>y: {deltaXyPos.y.toFixed(0)}</strong>
          </div>
        </div>
        
      </Draggable>
    );
  }
}
export default App;

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.