Creating a Customizable Dashboard with React and Drag-and-Drop functionality

In this article, we will create a Dashboard with a drag-and-drop functionality using React JS. This project basically implements useState principles and the use of vite to set up the run time environment of React and JavaScript. The drag and drop functionality will enable the user to drag from one container and drop the picked element into the other container and vice versa for the opposite direction as well.

Project Preview: Let us have a look at how the final output will look like.

Prerequisites :

• React JS
• JavaScript
• HTML
• CSS

Approach to create Customizable Dashboard:

• The project basically involves the functionalities of dragging a box from one container and be able to drag it over to the other one and drop it there.
• This project utilizes the technologies of React & Javascript.
• It uses a single component that is App.jsx which collectively handles all drag over and drag start functions.
• Usestate hooks are defined for every item which is draggable into the other container.

Steps to Create Project:

Step 1: Set up React Project using vite

npm create vite@latest

Step 2: Add project name and select JavaScript & Reactjs.

Step 3: Run the following commands tocomplete the setup.

cd Path -> To go to the particular directory
npm install -> To install node modules
npm run dev -> To run the site on localhost

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
}
"devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.0"
}

Example: Add the following code in App.jsx, index.css.

Javascript

// App.js

import React, { useState } from 'react';
import './index.css';

function App() {
    const [item, setItem] = useState(null);

    const handleStart = (e, id) => {
    setItem(document.getElementById(id));
};

const handleDrag = (e) => {
    e.preventDefault();
};

const handleDrop = (e, id) => {
const targetBox = document.getElementById(id);
e.preventDefault();

if (id === 'right') {
    if (item.parentElement.id !== 'right') {
        targetBox.appendChild(item);
    }
} else {
    if (item.parentElement.id === 'right') {
        targetBox.appendChild(item);
    }
}

setItem(null);
};

return (
<div className="container">
    <div id="left">
        <div id='list1'
             draggable
             className="list"
             onDragStart={(e)=> handleStart(e, "list1")}
             onDragOver={handleDrag}
             onDrop={(e) => handleDrop(e, 'left')}
            >
            <span role="img" aria-label="List Icon">📋</span>
            <div className='heading'> Reactjs -
                Components</div>
            <p>Build reusable UI components with React.js</p>
        </div>
        <div id="list2"
             draggable
             className="list"
             onDragStart={(e)=> handleStart(e, "list2")}
             onDragOver={handleDrag}
             onDrop={(e) => handleDrop(e, 'left')}
            >
            <span role="img" aria-label="List Icon">📋</span>
            <div className='heading'> Nextjs -
                Animations</div>
            <p>Create stunning animations with Next.js</p>
        </div>
        <div id="list3"
             draggable
             className="list"
             onDragStart={(e)=> handleStart(e, "list3")}
             onDragOver={handleDrag}
             onDrop={(e) => handleDrop(e, 'left')}
            >
            <span role="img" aria-label="List Icon">📋</span>
            <div className='heading'>HTML -
                Layouts</div>
            <p>Design responsive layouts using HTML</p>
        </div>
        <div id="list4"
               draggable
             className="list"
             onDragStart={(e)=> handleStart(e, "list4")}
             onDragOver={handleDrag}
             onDrop={(e) => handleDrop(e, 'left')}
            >
            <span role="img" aria-label="List Icon">📋</span>
            <div className='heading'>CSS - Styling
            </div>
            <p>Add beautiful styles to your web pages with CSS</p>
        </div>
        <div id="list5"
             draggable
             className="list"
             onDragStart={(e)=> handleStart(e, "list5")}
             onDragOver={handleDrag}
             onDrop={(e) => handleDrop(e, 'left')}
            >
            <span role="img" aria-label="List Icon">📋</span>
            <div className='heading'>JavaScript -
                Functionalities</div>
            <p>Implement various functionalities using JavaScript</p>
        </div>
    </div>
    <div id="right"
         onDragOver={handleDrag}
         onDrop={(e)=> handleDrop(e, 'right')}
        >
        <p>Drop In Here If Completed</p>
    </div>
</div>
);
}

export default App;

CSS

/* index.css */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(200deg, #69deff, #1d0032);
    height: 100vh;
    width: 100%;
    flex-wrap: wrap;
}

#left,
#right {
    border: 4px solid #000000;
    width: 380px;
    height: 430px;
    margin: 45px;
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 10px;
    position: relative;
    overflow: auto;
}

.list {
    margin: 20px;
    padding: 12px;
    background-color: #000317;
    color: white;
    cursor: grab;
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-size: 19px;
    box-shadow: 2px 4px 5px black;
    flex-direction: column;
}

.heading {
    font-weight: bolder;
    text-align: center;
    font-size: 22px;
}

#right {
    background-color: #e7f0ff;
    font-size: 22px;
    font-weight: bolder;
}

.list span {
    margin-right: 10px;
}

.list p {
    margin-left: 10px;
    font-size: 18px;
    font-weight: normal;
    color: #eeeeee;
    text-align: center;
}

Output :

Drag & Drop

Explanation of the Output:

• We have defined an item to be null initially using useState function.
• HandleStart() function is invoked on selection of any element or List where default method is cancelled and on dragging the element, handleDrag() is invoked which cancels the default function again.
• On invoking handleDrop() function, the element is targetted which is being dragged, and if the element is in right position, then it is shifted to the left container, and if the element is in the left position, then it is shifted to the right side of the container.