Forem: Ahmed

Drag and Drop Kanban board from scratch with React : Part 2 🚀

Ahmed — Fri, 29 Dec 2023 09:42:26 +0000

In part 1 we discussed the basic idea of how to implement the drag and drop feature. In this part we will extend the idea and make the full Kanban board. Go read part 1 first if you haven't.

We are going to add two more columns for the kanban board. One for ongoing tasks and one for completed tasks

Multiple States

Previously we only needed to maintain only one state tasks for todo list. But if we want to add two more columns or container for tasks to drop in then we need two more states. In total three separate states.

const [todo, setTodo] = useState<string[]>();
const [ongoing, setOngoing] = useState<string[]>();
const [completed, setCompleted] = useState<string[]>();

So basically when we drop a task in Todo column it would get added to todo state and get deleted from previous state it was in and vice versa.

Add two more columns

Lets now create ongoing and completed column alongside todo column. Which is very easy to do, we just have to copy paste the todo column's code and rename it. We should also replace old generic handleOnDrop function with their own functions.

<div 
    className="..."
    onDragOver={handleOnDragOver}
    onDrop={handleOnDropOngoing}
>
    {ongoing &&
        ongoing.map((taskName) => {
            return (
                <div
                    className="..."
                    draggable
                    onDragStart={(e) => {
                        handleOnDrag(e, taskName);
                    }}
                >
                    {taskName}
                </div>
            );
        })}
</div>

and

<div 
    className="..."
    onDragOver={handleOnDragOver}
    onDrop={handleOnDropCompleted}
>
    {completed &&
        completed.map((taskName) => {
            return (
                <div
                    className="..."
                    draggable
                    onDragStart={(e) => {
                        handleOnDrag(e, taskName);
                    }}
                >
                    {taskName}
                </div>
            );
        })}
</div>

You will notice we also changed the state name according to the states we created earlier and a new onDrop function for each column. So we also applied the changes to our old todo div

<div 
    className="..."
    onDragOver={handleOnDrag}
    onDrop={handleOnDropTodo}
>
    {todo &&
        todo.map((taskName) => {
            return (
                <div
                    className="..."
                    draggable
                    onDragStart={(e) => {
                        handleOnDrag(e, taskName);
                    }}
                >
                    {taskName}
                </div>
            );
        })}
</div>

Now we have all the columns.

`onDrop` handlers

Removing the old handleOnDrop function, we now have three onDrop functions instead of one : handleOnDropTodo, handleOnDropOngoing and handleOnDropCompleted

Now basically, there can be 3*2 = 6 scenarios. For example,

Dropping in todo list from ongoing
Dropping in ongoing list from todo
Dropping in todo list from completed
Dropping in completed list from todo ...... etc.

You get the idea.

Lets start with handleOnDropTodo function. Setting the task in the dropped column's state is same as before. New part is to delete the old instance from ongoing state if it came from ongoing or from completed state if it came from completed column.

The function would look like this :

function handleOnDropTodo(e: React.DragEvent) {

    // Set the dropped task to todo state
    if (todo) {
        setTodo([
            ...todo.filter(
                (taskName) => taskName !== e.dataTransfer.getData("name")
            ),
            e.dataTransfer.getData("name"),
        ]);
    } else {
        setTodo([e.dataTransfer.getData("name")]);
    }

    // If dropping from ongoing --> todo
    // Delete from ongoing
    ongoing?.forEach((task) => {
        if (task === e.dataTransfer.getData("name")) {
            setOngoing([
                ...ongoing.filter(
                    (taskName) =>
                        taskName !== e.dataTransfer.getData("name")
                ),
            ]);
        }
    });

    // If dropping from completed --> todo
    // Delete from completed
    completed?.forEach((task) => {
        if (task === e.dataTransfer.getData("name")) {
            setCompleted([
                ...completed.filter(
                    (taskName) =>
                        taskName !== e.dataTransfer.getData("name")
                ),
            ]);
        }
    });
}

Now we have to write handleOnDropOngoing function. Which is pretty easy to do by copy pasting the code for handleOnDropTodo and changing the names.

function handleOnDropOngoing(e: React.DragEvent) {
    // Set the dropped task to todo state
    if (ongoing) {
        setOngoing([
            ...ongoing.filter(
                (taskName) => taskName !== e.dataTransfer.getData("name")
            ),
            e.dataTransfer.getData("name"),
        ]);
    } else {
        setOngoing([e.dataTransfer.getData("name")]);
    }

    // If dropping from todo --> ongoing
    // Delete from todo
    todo?.forEach((task) => {
        if (task === e.dataTransfer.getData("name")) {
            setTodo([
                ...todo.filter(
                    (taskName) =>
                        taskName !== e.dataTransfer.getData("name")
                ),
            ]);
        }
    });

    // If dropping from completed --> ongoing
    // Delete from completed
    completed?.forEach((task) => {
        if (task === e.dataTransfer.getData("name")) {
            setCompleted([
                ...completed.filter(
                    (taskName) =>
                        taskName !== e.dataTransfer.getData("name")
                ),
            ]);
        }
    });
}

Lastly the handleOnCompleted function is easy to write following the last two, as we can see. So I am skipping it here.

We have all the states, column divs and onDrop handlers ready. Things should start working perfectly now.

Improvements

The code can be improved quite a lot. To keep things simple I wrote everything in one file and repeated codes.

We can make a separate todo component with more info like deadline, priority, description etc.
We can make hooks to handle the various dropping and deleting actions for states.
Instead of already make task we can add a form to dynamically create tasks.
Lastly, make all task data persistent by using localstorage or a database.

I already did all of these in a website I made using the same logic as this article called Task Master :

You can check the code for Task Master here : Github Link

Thank You

Link to the article's full code : Github Link

I hope this was helpful to you 😊
Follow me on Twitter and LinkedIn
Thanks for reading 😇

Drag and Drop Kanban board from scratch with React 🔥

Ahmed — Mon, 25 Dec 2023 18:42:27 +0000

We all used those Kanban-style todo or task management apps where there are columns for each stages of a tasks and we can drag and drop tasks from one column to another.

Implementing this drag and drop feature in react is way easier than I thought. Everything you need is already there without using any library or package. So let's get started. 🚀

*** ( Typescript is used but its not noticable in code examples JS users can easily understand and the CSS styles are omited in the code examples. Get to the github link to see the full code. )

The idea 💡

The main idea behind it is pretty simple. We are going to use default HTML Drag and Drop API that uses various drag and drop events. To make any HTML element draggable we just need to add draggable attribute to an element. Then we will maintain a state where will store data for all the dropped elements and then show them in the div. To achieve this will use various drag and drop even listeners already available with HTML5 and React.

🎯 The main trick is here is that we can not move an element/component literally. We will pass its data with it when we drag and then recreate the element/component again from the passed data inside the div we are dropping it in.

We will use events listeners like :

OnDrop : This event activates when a valid draggable element is dropped in its area.
OnDragStart : This is fired when dragging of an element is started.
OnDragEnd : This is fired when dragging is ended.
OnDragOver : This is fired when we drag over the area of an element

There are many more but for our use these are enough. So lets start the implementation.

The implementation 🧑‍💻

Let's create some task elements in a div from where we will drag them from :

and a todo div where we will drop them :

Now to make the task elements draggable we just add the draggable attribute.



<div
    className="..."
    draggable
>
    Task 1
</div>

Now we can drag the task div. When we drag an element we need to pass its data with it so that we can recreate it. In this we case will pass its name.

To do this lets use onDragStart which fires when we start dragging an element.



<div
    className="..."
    draggable
    onDragStart={(e) => {
        handleOnDrag(e, "Task 1");
    }}
>
    Task 1
</div>

Here we are passing the event e and the name of the task to the handleOnDrag function.

Lets write the handleOnDrag function



function handleOnDrag(e: React.DragEvent, name: string) {
    e.dataTransfer.setData("name", name);
}

Here we are setting the name string as data under "name" key. Now whenever we drag it the name data will go along with it.

We handled the dragging part now lets drop it.

We need a state where we will store data for all the dropped tasks and later show them in the div where we dropped them.



const [tasks, setTasks] = useState<string[]>()

Now we will use onDrop attribute to signal the dropping event. But before doing this we have to handle onDragOver for an edge case. Just do this :



<div 
    className="..."
    onDragOver={handleOnDragOver}
>
    {/* The div we are dropping the task in */}
</div>

And now the handleOnDragOver function



function handleOnDragOver(e: React.DragEvent) {
    e.preventDefault();
}

This will stop a default behavior where the onDragOver keeps firing idefinately.

Now for the onDrop



<div 
    className="..."
    onDragOver={handleOnDragOver}
    onDrop={handleOnDrop}
>
    {/* The div we are dropping the task in */}
</div>

Now lets write the handleOnDrop function



function handleOnDrop(e: React.DragEvent) {
    if(tasks) {
        setTasks([...tasks,e.dataTransfer.getData("name")] )
    } else {
        setTasks([e.dataTransfer.getData("name")])
    }
}

Here we are creating a new array with the dropped task div's data and setting that array in the tasks state. The e.dataTransfer.getData("name") part will look familiar. Because we used e.dataTransfer.setData("name", name) in the handleOnDrag function to name the dragged task. And now we are getting that name data that we set previously when we started dragging it.

Now we have the data for the task that we are dropping. We now just have to show the task in the div using the data we got. We will use the same Task div we created earlier, inside the div we dropping it in. We will map through all the tasks in the tasks state and show them one by one.



<div 
    className="..."
    onDragOver={handleOnDragOver}
    onDrop={handleOnDrop}
>
    {tasks &&
        tasks.map((taskName) => {
            return (
                <div
                    className="..."
                    draggable
                    onDragStart={(e) => {
                        handleOnDrag(e, taskName);
                    }}
                >
                    {taskName}
                </div>
            );
        })}
</div>

Finally we have the dragged task in the div we dropped it in.

But there is a catch. The Task is getting duplicated every time we drag and drop it the task again in the div.

To solve we have to delete the previous instance of the task in the state when we move it. Its pretty easy to do with filter()



function handleOnDrop(e: React.DragEvent) {
    if(tasks) {
        setTasks([
            ...tasks.filter(
                (taskName) => taskName !== e.dataTransfer.getData("name")
            ),
            e.dataTransfer.getData("name"),
        ]);
    } else {
        setTasks([e.dataTransfer.getData("name")])
    }
}

Now everything is working. We can drag tasks from the list and drop them in the Todo div.

How to extend the idea further ➡️

The basic stuff is set up. Now we can make it more user friendly by giving visual feedback when we start dragging the task and when we drop it. For that we can use onDragStart, onDragEnd, onDragOver etc. events to change the CSS styles of the elements. We can also add animations.

In part 2, we we will do all of these and also add two more columns for ongoing and completed tasks and make a fully functioning Kanban board-like todo board. We will need to manage three separate states and many more complexities. Part 2 coming soon ✅

Part 2 is released🔥

Check it out here

Link to full code : Github Link