Episyche

Products

Blog

NextJS/Drag & Drop /

How to add Drag and Drop in next.js?

Published on

Drag and Drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location. In this blog, we will learn how to add a Drag and Drop feature in the next js application using React DND.

Introduction :

Next js :

Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here.

Drag and Drop :

Drag and drop is a functionality by which users can select an object or a section of text and can move it to the desired location and "drop" it there. Drag and drop is a part of most graphical user interfaces.

Flow Diagram:

Prerequisites :

next.js

Steps:

Step 1: Installing Library’s

If you already have the React.js project, please copy the project. In this blog, we are using a sample React.js project code with Tailwind CSS.
After creating a React project install "react-dnd". using the following command.

1npm i react-dnd

And then install "react-dnd-html5-backend". using the following command.

1npm i react-dnd-html5-backend

Step 2: Creating Component

Create a component folder inside the React Project.

Drop → component

Inside the component folder, create a filename with a .js extension with your preferred name (e.g. DragFile.js ). As shown in the following screenshot.

Step 3: Creating DragCard.js file

Drop → pages

Inside the pages folder, creates a filename with a .js extension with your preferred name (e.g. DragCard.js ) in the above path. As shown in the following screenshot.

Drop → pages→DragCard.js

Update the DragCard.js in the above path.
For this example, we are using the useDrag from react-dnd, so we have imported the same here. using the following snippet.

1import { useDrag } from "react-dnd";

In the DragCard function use useDrag hooks. Inside the useDrag hooks set a type and also type is required. It is used by the "accept" specification of drop targets.
The collect function utilizes a monitor instance.

1export const DragCard = ({ name }) => {
2  const [{ isDragging }, dragRef] = useDrag({
3    type: "language",
4    item: { name },
5    collect: (monitor) => ({
6      isDragging: monitor.isDragging(),
7    }),
8  });
9
10  return (
11    <div>
12      <div  ref={dragRef}>
13        {name}
14        {isDragging && "📂"}
15      </div>
16    </div>
17  );
18};

Sample code for the `/pages/DragCard.js` file can be found in the following Github URL.
nextjs_drag_and_drop_example/DragCrad.js at main · episyche/nextjs_drag_and_drop_example

Step 4: Update the DragFile.js file

Drop → component →DragFile

Update the DragFile.js in the above path,
For this example, we are using the DragCard file, so we have imported the same here. using the following snippet.

1import { DragCard } from "../pages/DragCard";

In this Example we using mock data for Mapping. using the following snippet.

1const Data = [
2  { name: "HTML" },
3  { name: "CSS" },
4  { name: "Javascript" },
5  { name: "Python" },
6];

Inside the DragFile function map a mock data. and set a value in the DragCard component tag. using the following snippet.

1export function DragFile() {
2  return (
3    <div className="my-8 mx-8 rounded-xl border w-fit">
4      <div className="my-4">
5        <div>
6          <p className="mx-16 font-bold">Draged Items</p>
7        </div>
8        {Data.map((e) => (
9          <div
10            key={e.name}
11            className="border w-fit my-2 p-2 mx-16 rounded bg-indigo-400 text-white font-bold cursor-pointer"
12          >
13            <DragCard draggable name={e.name} />
14          </div>
15        ))}
16      </div>
17    </div>
18  );
19}
20export default DragFile;

As shown in the following screenshot.

drag file

Sample code for the `/pages/components/DragFile.js` file can be found in the following Github URL.
nextjs_drag_and_drop_example/DragFile.js at main · episyche/nextjs_drag_and_drop_example

Step 5: Update the index.js file

Drop → pages →index.js

Update the DragFile.js in the above path,
For this example, we are using the useDrop form react-dnd ,useState form react hooks , and DragFile from component, so we have imported the same here. using the following snippet.

1import DragFile from "../components/DragFile";
2import { useDrop } from "react-dnd";
3import { useState } from "react";

Set the useState from react hooks. using the following snippet.

1const [basket, setBasket] = useState([]);

In the Home function use useDrop hooks.
Inside the useDrop hooks. we use accept, drop, and collect key value. using the following snippet.
accept is Required. A string, a symbol, or an array of either. This drop target will only react to the items produced by the drag sources of the specified type or types.
drop(item, monitor) is Optional. Called when a compatible item is dropped on the target.
collect is also Optional. The collecting function. It should return a plain object of the props to return for injection into your component. It receives two parameters, monitor and props.

1export default function Home() {
2  const [basket, setBasket] = useState([]);
3
4  const [{ isOver }, dropRef] = useDrop({
5    accept: "language",
6    drop: (item) =>
7      setBasket((basket) =>
8        !basket.includes(item) ? [...basket, item] : basket
9      ),
10    collect: (monitor) => ({
11      isOver: monitor.isOver(),
12    }),
13  });
14
15  return (
16
17    <div className="flex">
18      <div>
19        <DragFile />
20      </div>
21      <div className="my-8 mx-8 rounded-xl border w-fit" ref={dropRef}>
22        <div className="my-4">
23          <div>
24            <p className="mx-16 font-bold">Droped Items</p>
25          </div>
26          {basket.map((e) => (
27            <p className="border w-fit my-2 p-2 mx-16 rounded bg-indigo-400 text-white font-bold cursor-pointer">
28              {e.name}
29            </p>
30          ))}
31        </div>
32      </div>
33    </div>
34  );
35}

As shown in the following screenshot.

index file

Sample code for the /pages/index.js file can be found in the following Github URL.

nextjs_drag_and_drop_example/index.js at main · episyche/nextjs_drag_and_drop_example

Step 5. Add the DndProvider in _app.js to enable the data sharing among all the components.

Drop → pages →_app.js

Update the _app.js in the above path,
For this example we are using the DndProvider , HTML5Backend. so we have imported the same here. using the following snippet.

1import { DndProvider } from 'react-dnd'
2import { HTML5Backend } from 'react-dnd-html5-backend'

The imported DndProvider is wrapped around the main component.
It is important to note that the Dragged values are accessible inside the child component enclosed by the DndProvider.
Any component outside the DndProvider will not be able to access the Draged values.

1function MyApp({ Component, pageProps }) {
2  return (
3    <>
4    <DndProvider backend={HTML5Backend}>
5    <Component {...pageProps} />
6    </DndProvider>
7    </>
8  )
9}