Implementing Drag and Drop to Arrange/Sort Items with React, Tailwind CSS, and Dnd-kit

By /

Introduction

Have you ever wondered how applications like Trello or Asana manage their intuitive drag-and-drop interfaces? Imagine you have an application where users need to sort their items easily. Without a smooth drag-and-drop feature, this task can become tedious and frustrating. In this blog post, we’ll explore how to implement a dynamic drag-and-drop functionality using React, Tailwind CSS, and Dnd-kit to create a seamless user experience for arranging and sorting items.

Real-World Problem

In the real world, applications often require users to rearrange items based on priority, status, or other criteria. For instance, a user may need to reorder their ideas quickly during a brainstorming session. Without an efficient drag-and-drop feature, this process could involve cumbersome steps like manually editing item positions or using inefficient move-up/move-down buttons. Our goal is to provide a solution that simplifies this process, making it more intuitive and efficient for users.

Use Case

Let’s consider a use case of a brainstorming tool where users can organize their ideas. Users need the ability to:

  • Add new ideas to a list.

  • Sort and prioritize these ideas by dragging and dropping them into the desired order.

  • Move ideas between different categories (e.g., new ideas vs. old ideas).

To achieve this, we will build a React application using Vite for the project setup, Tailwind CSS for styling, and Dnd-kit for the drag-and-drop functionality. This setup will allow us to create a user-friendly interface that enhances productivity and user experience.

Setting Up the Project

  • Initialize the Vite Project

npm create vite@latest my-drag-drop-app --template react
cd my-drag-drop-app
npm install

  • Install Required Dependencies:

npm install tailwindcss dnd-kit react-hot-toast react-icons

  • Configure Tailwind CSS:

npx tailwindcss init

  • Update tailwind.config.js:
module.exports = { content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, ], plugins: [],
}
Enter fullscreen mode Exit fullscreen mode
  • Add Tailwind directives to index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Implementing Drag and Drop

App.jsx

The App.jsx file is the main component that sets up the overall layout of the application and manages the global state.

Summary

  • Main component to manage the overall application state.

  • Utilizes useState to handle project data and updates.

  • Incorporates the Header and DragDropArrange components for UI and functionality.

  • Includes Toaster from react-hot-toast for notifications.

Key Functions:

  • State Management: Manages state for project data.

  • Handle New Data: Function to add new data to the project data state.

  • Layout: Sets up the layout including header, main content, and notifications.

import React, { useState } from 'react';
import { Toaster } from 'react-hot-toast';
import Header from './screens/Navigation/Header';
import DragDropArrange from './screens/DDA/DragDropArrange';
import projectDataJson from "./Data/data.json" function App() { const [projectData, setProjectData] = useState(projectDataJson) function handleNewData(data){ const tempData = projectData.newIdea; const maxNumber = (Math.random() * 100) * 1000; tempData.push({_id: maxNumber, idea: data}); setProjectData({...data, newIdea: tempData}) } return ( <div className="h-auto overflow-auto"> <div className='w-full h-auto overflow-auto fixed z-50'> <Header handleNewData={handleNewData}/> </div> <div className="h-auto overflow-auto my-16 flex items-center justify-center"> <DragDropArrange projectData={projectData}/> </div> <Toaster toastOptions={{ className: 'text-xs', duration: 3000, }} /> </div> );
} export default App;
Enter fullscreen mode Exit fullscreen mode

Header.jsx

The Header.jsx file serves as the navigation bar, providing a button to open a form for adding new items.

Summary:

  • Contains navigation and a button to open the item input form.

  • Uses useState to manage the state of the item input form visibility.

  • Handles user interactions for adding new items.

Key Functions:

  • Item Form Toggle: Manages the visibility of the item input form.

  • Handle New Data: Passes the new item data to the parent component.

import React, { useState } from 'react';
import { PiNotepadFill } from "react-icons/pi";
import AddIdea from '../DDA/AddIdea'; const Header = ({handleNewData}) => { const [ideaTabOpen, setIdeaTabOpen] = useState(false) return ( <> <nav className='w-full h-auto p-2 float-left overflow-auto bg-black flex items-center justify-center'> <div className='w-2/5 mdw-3/5 lg:w-4/5 h-auto px-6'> <span className='font-bold text-white text-xl lg:text-2xl flex items-center justify-start'><PiNotepadFill/>&nbsp;DDA</span> </div> <div className='w-3/5 md:w-2/5 lg:w-1/5 h-auto flex items-center justify-end px-4'> <button className='text-sm lg:text-lg font-bold text-white border p-2 rounded-lg hover:bg-white hover:text-black border-white active:bg-gray' onClick={() => setIdeaTabOpen(!ideaTabOpen)}>{ideaTabOpen ? "Cancel" : "New Idea"}</button> </div> </nav> {ideaTabOpen && ( <div className='float-left overflow-auto relative w-full'> <AddIdea handleNewData={handleNewData} setIdeaTabOpen={setIdeaTabOpen}/> </div> )} </> )
} export default Header
Enter fullscreen mode Exit fullscreen mode

AddIdea.jsx

The AddIdea.jsx file provides the form for adding new items, including validation and submission functionality.

Summary:

  • Component for adding new items to the list.

  • Uses useState to manage form input data and character count.

  • Validates input length and submits new data to the parent component.

Key Functions:

  • Handle Change: Manages form input and character count.

  • Handle Submit: Validates and submits the form data to the parent component.

import React, { useState } from 'react';
import toast from "react-hot-toast";
import { Helmet } from 'react-helmet'; const AddIdea = ({ handleNewData, setIdeaTabOpen }) => { const maxLengths = 100; const [formData, setFormData] = useState(); const [remainingChars, setRemainingChars] = useState(80) const handleChange = (e) => { if (e.target.value.length > maxLengths) { toast.error(`${`Input can't be more than ${maxLengths} characters`}`); } else { setFormData(e.target.value); setRemainingChars(maxLengths - e.target.value.length); } }; const handleSubmit = (e) => { e.preventDefault(); if (!formData) { toast.error(`You don't have an idea.`); return } handleNewData(formData); setIdeaTabOpen(false) }; return ( <section className='h-screen'> <div className='flex items-center justify-center bg-blue rounded-b-xl border-b-[10px] py-8 lg:p-10'> <div className='m-1 w-full h-auto flex flex-wrap items-center justify-center'> <div className='sm:w-[90%] w-3/5 h-auto'> <textarea className='w-full h-auto overflow-auto outline-none border p-2 sm:text-sm ' placeholder='Items...' name="items" value={formData} maxLength={maxLengths} onChange={handleChange} ></textarea> <p className={` text-xs ${remainingChars < 15 ? "text-red" : "text-white"}`}>{remainingChars} characters remaining</p> </div> <div className='sm:w-4/5 w-1/5 p-2 flex items-center justify-center'> <button className='bg-primary_button text-white px-4 py-1 rounded-md font-bold' onClick={handleSubmit}>Submit</button> </div> <Helmet><title>Drag Drop & Arrange | New Idea</title></Helmet> </div> </div> <div className='w-full h-full fixed backdrop-blur-[1px]' onClick={()=>setIdeaTabOpen(false)}></div> </section> );
}; export default AddIdea;
Enter fullscreen mode Exit fullscreen mode

DragDropArrange.jsx

The DragDropArrange.jsx file is responsible for managing the drag-and-drop functionality and updating the order of items based on user interactions.

Summary:

  • Main component for handling drag-and-drop functionality.

  • Uses DndContext and SortableContext from @dnd-kit/core for drag-and-drop behavior.

  • Manages state for the data array and updates the order of items based on drag events.

  • Fetches initial data from projectData and sets it to the state.

Key Functions:

  • Handle Drag End: Manages the logic for rearranging items based on drag-and-drop actions.

  • Fetch Data: Fetches initial data and sets it to the component state.

import React, { useState, useEffect } from 'react';
import { DndContext, closestCenter } from '@dnd-kit/core';
import { arrayMove, SortableContext } from '@dnd-kit/sortable';
import { Helmet } from 'react-helmet';
import Arrange from './Arrange';
import Loader from '../Navigation/Loader'; const DragDropArrange = ({projectData}) => { const [dataArray, setDataArray] = useState({ newIdea: undefined, oldIdea: undefined, updateValue: [] }); const handleDragEnd = ({ active, over }) => { if (!over) return; const { fromList, targetId } = active.data.current; const { toList, index } = over.data.current; if (fromList === toList) { const sortedItems = arrayMove(dataArray[toList], dataArray[toList].findIndex((idea) => idea._id === targetId), index); setDataArray((prev) => ({ ...prev, [toList]: sortedItems })); } else { const draggedItem = dataArray[fromList].find((idea) => idea._id === targetId); const updatedFromList = dataArray[fromList].filter((idea) => idea._id !== targetId); const updatedToList = [...dataArray[toList].slice(0, index), draggedItem, ...dataArray[toList].slice(index)]; setDataArray((prev) => ({ ...prev, [fromList]: updatedFromList, [toList]: updatedToList })); } }; const fetchData = async () => { const { newIdea, oldIdea } = projectData; setTimeout(() => { setDataArray((prev) => ({ ...prev, newIdea, oldIdea })); }, 500); }; useEffect(() => { fetchData(); }, []); return ( <section className='w-full h-auto md:w-11/12 lg:w-10/12 py-12 md:p-4 lg:p-12'> <div className='w-full h-auto my-2 overflow-auto'> <div className='w-full h-auto my-4 overflow-auto'> {dataArray.newIdea && dataArray.oldIdea && ( <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}> <SortableContext items={dataArray?.newIdea}> <Arrange dataArray={dataArray} /> </SortableContext> </DndContext> )} {!dataArray.newIdea && !dataArray.oldIdea && ( <> <div className='w-full h-auto flex items-center justify-center'><Loader/></div> <div className='w-full text-center text-xl font-bold'> <span className='text-gradient'>Loading...</span> </div> </> )} </div> </div> <Helmet><title>Drag Drop & Arrange | Home</title></Helmet> </section> );
}; export default DragDropArrange
Enter fullscreen mode Exit fullscreen mode

Arrange.jsx

The Arrange.jsx file handles the arrangement of new and old ideas, displaying them in sortable contexts.

Summary:

  • Manages the arrangement of new and old ideas.

  • Uses SortableContext for sortable behavior.

  • Displays items and manages their order within each category.

Key Functions:

  • Display Items: Renders items in their respective categories.

  • Handle Sorting: Manages the sortable behavior of items.

import React from 'react';
import { SortableContext } from '@dnd-kit/sortable';
import Drag from "./Drag";
import Drop from "./Drop";
import Lottie from 'react-lottie';
import NoData from '../../Lottie/NoData.json'; const Arrange = ({ dataArray }) => { const { newIdea, oldIdea } = dataArray; const defaultOptions = { loop: true, autoplay: true, animationData: NoData, rendererSettings: { preserveAspectRatio: "xMidYMid slice" } }; return ( <section className='w-full h-auto rounded-md overflow-auto'> <div className='h-auto overflow-auto flex flex-wrap items-start justify-around'> <div className='w-[48%] min-h-80 h-auto border border-blue shadow-md shadow-white-input-light rounded-md'> <h2 className='bg-blue text-white text-xl text-center font-extrabold py-2'>New Idea</h2> <SortableContext items={newIdea.map(item => item._id)}> {newIdea.length > 0 && ( <> {newIdea?.map((data) => ( <React.Fragment key={data._id}> <Drag data={data} listType="newIdea"/> </React.Fragment> ))} <Drop index={newIdea.length} listType="newIdea" /> </> )} {newIdea.length < 1 && ( <> <div className='w-full h-52 flex items-center justify-center'> <Lottie options={defaultOptions} height={150} width={150} /> </div> <Drop index={newIdea.length} listType="newIdea" /> </> )} </SortableContext> </div> <div className='w-[48%] min-h-80 h-auto border border-blue shadow-md shadow-white-input-light rounded-md'> <h2 className='bg-blue text-white text-xl text-center font-extrabold py-2'>Old Idea</h2> <SortableContext items={oldIdea.map(item => item._id)}> {oldIdea.length > 0 && ( <> {oldIdea?.map((data) => ( <React.Fragment key={data._id}> <Drag data={data} listType="oldIdea" /> </React.Fragment> ))} <Drop index={oldIdea.length} listType="oldIdea" /> </> )} {oldIdea.length < 1 && ( <> <div className='w-full h-52 flex items-center justify-center'> <Lottie options={defaultOptions} height={150} width={150} /> </div> <Drop index={oldIdea.length} listType="oldIdea" /> </> )} </SortableContext> </div> </div> </section> );
} export default Arrange
Enter fullscreen mode Exit fullscreen mode

Drag.jsx

The Drag.jsx file manages the draggable items, defining their behavior and style during the drag operation.

Summary:

  • Manages the behavior and style of draggable items.

  • Uses useDraggable from @dnd-kit/core for draggable behavior.

  • Defines the drag and drop interaction for items.

Key Functions:

  • useDraggable: Provides drag-and-drop functionality.

  • Style Management: Updates the style based on drag state.

import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import { IoMdMove } from "react-icons/io"; const Drag = ({ data, listType }) => { const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({ id: data._id, data: { fromList: listType, targetId: data._id }, }); const style = { transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined, opacity: isDragging ? 0.5 : 1, pointerEvents: isDragging ? 'none' : 'auto', }; return ( <> <section className="w-auto h-auto bg-yellow rounded-md border overflow-hidden m-2" ref={setNodeRef} style={style} {...listeners} {...attributes} > <div> <div className="w-auto p-2 h-auto bg-yellow"> <p className="h-auto text-xs lg:text-sm text-black break-all">{data?.idea}</p> </div> </div> </section> </> );
}; export default Drag;
Enter fullscreen mode Exit fullscreen mode

Drop.jsx

The Drop.jsx file defines the droppable areas where items can be dropped, including visual feedback during the drag operation.

Summary:

  • Manages the behavior of droppable areas.

  • Uses useDroppable from @dnd-kit/core for droppable behavior.

  • Provides visual feedback during drag-and-drop interactions.

Key Functions:

  • useDroppable: Provides droppable functionality.

  • Handle Drop: Manages drop actions and updates the state accordingly.

import React from 'react';
import { useDroppable } from '@dnd-kit/core'; const Drop= ({ index, setDragged, listType }) => { const { isOver, setNodeRef } = useDroppable({ id: `${listType}-${index}`, data: { toList: listType, index }, }); const handleDrop = (e) => { e.preventDefault(); setDragged({ toList: listType, index }); }; return ( <section ref={setNodeRef} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()} className={`w-auto h-16 rounded-lg flex items-center justify-center text-xs text-secondary_shadow ${isOver ? ` opacity-100` : `opacity-0`}`} style={{ pointerEvents: 'none' }} > </section> );
}; export default Drop
Enter fullscreen mode Exit fullscreen mode

Conclusion

By following this comprehensive guide, you can create a dynamic and user-friendly drag-and-drop interface for your applications. This setup not only enhances user experience but also makes managing and organizing items intuitive and efficient. The combination of React, Tailwind CSS, and Dnd-kit provides a robust foundation for building such interactive features.

Feel free to customize and extend this implementation to suit your specific needs. Happy coding!

Source Code

You can find the complete source code for this project in my GitHub repository:
Github Link

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment

Your email address will not be published. Required fields are marked *

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top