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;
