NextJS/Drag & Drop /
How to add Drag and Drop in next.js?
2022-12-14T07:32:32.481948Z
Published on
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-dndAnd then install "react-dnd-html5-backend". using the following command.
1npm i react-dnd-html5-backendStep 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
/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.
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
/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.
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}
As shown in the following screenshot.
Sample code for the /pages/app.js file can be found in the following Github URL.
nextjs_drag_and_drop_example/_app.js at main · episyche/nextjs_drag_and_drop_example
Step 6: Run your Application
Run the Next Application with the following command.
1npm run devAfter compiling your application open your browser and check the following URL:
1http://localhost:3000/A Sample Github repo, with all the required configurations, is given below.
GitHub - episyche/nextjs_drag_and_drop_example
Result:
The Example UI is shown in the following screenshot.
GitHub - episyche/nextjs_drag_and_drop_example 
First, click and drag HTML text in Dragged Items. As shown in the following screenshot.
The Dragged HTML text Drop into Dropped items lists. As shown in the following screenshot.
And release Dragged text (HTML) in Dropped items lists. As shown in the following screenshot.
Finally the Draged item placed in the Drop box.
Comments
