ProBhavesh
How to Drag and Drop in React
How to Drag and Drop in React
How to Implement Drag and Drop in React
In the world of web development, user interaction is a key aspect of creating an engaging user experience. One such interaction that has gained popularity over the years is the drag and drop functionality. This feature allows users to click and hold an object, drag it somewhere else, and then release the mouse button to drop it.
In this blog post, we will explore how to implement drag and drop functionality in a React application. We will be using the React DnD library, which is a set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.
Table of Contents
- What is React DnD?
- Setting up the Project
- Creating the Drag Source
- Creating the Drop Target
- Styling the Components
- Conclusion
What is React DnD? <a name="what-is-react-dnd"></a>
React DnD is a modern drag and drop library for React, which is built on top of the HTML5 drag and drop API. It provides a clean and reusable way to add drag and drop functionality to your React components.
React DnD uses a declarative API, meaning you describe how your components should behave in terms of drag and drop, and React DnD takes care of the rest. It also provides a way to customize the appearance and behavior of your components during different stages of the drag and drop operation.
Setting up the Project <a name="setting-up-the-project"></a>
To get started, we will create a new React project using Create React App. If you don't have Create React App installed, you can install it using the following command:
npm install -g create-react-app
Then, create a new project:
npx create-react-app drag-and-drop-demo
Next, navigate into the project directory and install React DnD and its HTML5 backend:
cd drag-and-drop-demo
npm install react-dnd react-dnd-html5-backend
Creating the Drag Source <a name="creating-the-drag-source"></a>
The first step in implementing drag and drop is to create a drag source. This is the component that the user will be able to drag.
In our example, we will create a simple Card component that can be dragged. Here's how to do it:
import React from 'react';
import { DragSource } from 'react-dnd';
const cardSource = {
beginDrag(props) {
return {};
},
};
function collect(connect, monitor) {
return {
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
};
}
function Card(props) {
const { isDragging, connectDragSource, name } = props;
const opacity = isDragging ? 0.5 : 1;
return connectDragSource(
<div style={{ opacity }}>
{name}
</div>,
);
}
export default DragSource('card', cardSource, collect)(Card);
In the above code, we define a cardSource object that describes how the drag source behaves. We also define a collect function that connects the drag source to the React DnD backend.
Creating the Drop Target <a name="creating-the-drop-target"></a>
The next step is to create a drop target. This is the component where the user can drop the drag source.
In our example, we will create a Board component that can accept Card components. Here's how to do it:
import React from 'react';
import { DropTarget } from 'react-dnd';
const cardTarget = {
drop() {
return { name: 'Board' };
},
};
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
};
}
function Board(props) {
const { canDrop, isOver, connectDropTarget } = props;
const isActive = canDrop && isOver;
return connectDropTarget(
<div>
{isActive ? 'Release to drop' : 'Drag a card here'}
</div>,
);
}
export default DropTarget('card', cardTarget, collect)(Board);
In the above code, we define a cardTarget object that describes how the drop target behaves. We also define a collect function that connects the drop target to the React DnD backend.
Styling the Components <a name="styling-the-components"></a>
To make our components look better, we can add some CSS styles. Here's an example:
.Card {
padding: 10px;
margin: 10px;
background-color: #f2f2f2;
border-radius: 3px;
cursor: move;
}
.Board {
width: 300px;
height: 300px;
border: 1px dashed #ccc;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px;
}
Conclusion <a name="conclusion"></a>
In this blog post, we have learned how to implement drag and drop functionality in a React application using the React DnD library. We have created a drag source and a drop target, and connected them to the React DnD backend. We have also added some CSS styles to make our components look better.