In this tutorial, we will learn how to create and implement the drag and drop feature in React component using the react-draggable library.
Ideally, the user experience is the most crucial as well as a significant aspect of the web world and mobile apps in this modern age.
Drag and drop provide the user with the opportunity of choosing and moving HTML elements within the application layout. So, we will discuss only the drag part now and will be covering the drop feature later.
The interaction between the human and the computer becomes intuitive with this. So, implementing the draggable element functionality is quite important in respect of building a react app. We will learn how to work with react event handlers to keep an eye on the user’s action.
React Draggable Component With React-Draggable Package Example
See and execute the following steps for adding and implementing the above-mentioned
Step 1- Create A New React Project
As we know, the very first step towards creating the react draggable component is to create a new react project. So, execute the given command:
npx create-react-app react-draggable-componentNext, we get into the react app root:
cd react-draggable-component
Step 2- Install react Draggable Module
React draggable offers a simple solution for building the component’s elements draggable.
Now, execute the below-given command for installing the react-draggable package:
npm i react-draggable
Step 3- Creating React Draggable Component
In the third step, we will learn how to create the react draggable component. It’s just going to be simple and easy. For this, we will import the Draggable service from “react-draggable” package.
The use of the draggable component is not much difficult. We just have to declare <Draggable> </Draggable> tag. We will have to specify the collection of elements that need to be dragged within the layout.
It is done by wrapping the HTML element around the draggable directive for enabling the dragging within the layout.
// 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">
<div>You can drag me now.</div>
</div>
</Draggable>
);
}
}
export default App;
We can also give some styling through CSS to the draggable element, add the code in App.CSS.
.drag-wrapper {
width: 200px;
cursor: move;
padding: 50px;
text-align: center;
background: #e5e5e5;
}
Now, we will start the application to see the draggable component in action.
npm start
Step 4- Events Of React Draggable
The draggable components always support callback methods and include almost every event to handle any situation. See below the list of events and callback methods for the draggable component.
onStart: This is called when the dragging event invokes.
onDrag: This is invoked when the drag event is in process.
onStop: This is invoked when the dragging ends.
onMouseUp: This is invoked when the mouse is moved before stopping the drag.
onMouseDown: This is called when the mouse is clicked to begin drop.
OnTouchEnd: This is called in touch state before the drag ends.
OnTouchStart: This is invoked in touch condition before the drag begins.
Step 5- Implement Events In React Draggable
Now, in this step, we will bring those events into action which we have discussed in the previous step. We will be adding the events in the React Draggable Component.
// 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>You can drag me now.</div>
</div>
</Draggable>
);
}
}
export default App;
Step 6- Define Axis In Draggable Component
Sometimes, we need to identify in which direction the draggable element is moved. But it can be solved with axis property. It affects specifically flushing the DOM.
We can go with x,y and both the values whereas both is the default value.
The below-given example will show how to vertically drag the draggable component with axis property.
// App.js
import React from 'react';
import './App.css';
import Draggable from 'react-draggable';
class App extends React.Component {
render() {
return (
<Draggable
axis="y"
>
<div className="drag-wrapper">
<div>You can drag me vertically.</div>
</div>
</Draggable>
);
}
}
export default App;
Step 7- Find 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;
Conclusion
So, we reach the end of this tutorial in which we have seen how to add and implement the React Draggable Component. Hope that you have found this guide simple and easy to follow for implementing the Draggable functionality in React.
Thanks