Apgiiit.com

This blog post is about the resources I use frequently for my web based projects.

View

Being able to move the elements through drag and drop is a cool feature we see in many web-based applications like to-do lists, file drag and drop and many more. In this post I'd be discussing a simple drag and drop implementation in React using React beautiful DnD - a popular React library used to achieve drag and drop feature in your applications.

First, we would create a simple React application using the create-react-app package and install react beautiful dnd package. I'd also be using Tailwind CSS in this but that would be completely optional. Create a folder called 'dnd-client', open this folder in the terminal.

create-react-app .
npm install react-router-dom
npm install react-beautiful-dnd

We would need some sample data to drag and drop. Let's create a folder named 'data', inside this folder create a JS file called 'items.js'. Put the following code in this file.

const initialData = {

    columns: {
        'Sunday': {
            id: 'Sunday',
            title: 'To do',
            taskIds: ['task-1', 'task-2', 'task-3', 'task-4', 'Source'],
        },
        'Monday': {
            id: 'Monday',
            title: 'In progress',
            taskIds: ['task-5', 'task-6'],
        },
        'Tuesday': {
            id: 'Tuesday',
            title: 'Active',
            taskIds: ['task-7', 'task-8'],
        },
        'Wednesday': {
            id: 'Wednesday',
            title: 'More',
            taskIds: [],
        },
        'Thursday': {
            id: 'Thursday',
            title: 'Bark More',
            taskIds: [],
        },
        'Friday': {
            id: 'Friday',
            title: 'Good Friday',
            taskIds: [],
        },
        'Saturday': {
            id: 'Saturday',
            title: 'Party',
            taskIds: [],
        }
    },
    // facilitate the ordering of columns
    columnOrder: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
};

export default initialData;

Go to the 'App.js' file and initialize routing for this app, just some housekeeping stuff before we get into the good part.

View