Build Interactive UIs: Create Draggable Components with React-Draggable

Unlock the Power of React-Draggable: A Step-by-Step Guide to Creating a Task List

What is React-Draggable?

React-Draggable is a simple yet powerful library that allows you to add drag-and-drop functionality to your React components. By applying CSS transformations, you can create intuitive and user-friendly interfaces that enhance the overall user experience.

Getting Started with React-Draggable

To start using React-Draggable, make sure you have a React project set up on your local machine. Then, navigate to the project and run the following command in the terminal:

npm install react-draggable

Importing the Draggable Component

Once installed, import the <Draggable/> component from the library and wrap it around the element or component you want to make draggable.

Creating a Task List with Draggable Components

Let’s create a task list with three columns: Planning, In Progress, and Done. We’ll use React-Draggable to make the tasks draggable within their respective columns.

Setting Up the Project Structure

Create the following folder structure for our project:

• App.js
• Header.js
• AddTaskForm.js
• Planning.js
• InProgress.js
• Done.js
• Card.js
• App.css

Creating the Task List Components

Create the Header component and add the following code:

import React from 'eact';

const Header = () => {
// Add handleSubmit function as a prop
return (
<div></div>
);
};

export default Header;

Create the AddTaskForm component and add the following code:

import React, { useState } from 'eact';

const AddTaskForm = () => {
const [task, setTask] = useState({});

const handleSubmit = (e) => {
e.preventDefault();
// Add task to the task list
};

return (

<form></form><input type="text" placeholder="Task Name" />

<select>
<option value="planning">Planning</option>
<option value="inProgress">In Progress</option>
<option value="done">Done</option>
</select>
<button type="submit">Add Task</button>

);
};

export default AddTaskForm;

Create the Planning, InProgress, and Done components and add the following code:

import React from 'eact';

const Planning = () => {
const tasks = [
{ id: 1, name: 'Task 1', timeline: 'planning' },
{ id: 2, name: 'Task 2', timeline: 'planning' },
];

return (
<div>{tasks.map((task) => (

))}</div>
);
};

export default Planning;

Create the Card component and add the following code:

import React from 'eact';
import { Draggable } from 'eact-draggable';

const Card = ({ task, onDelete }) => {
return (
<div>
<h2>{task.name}</h2>
{task.timeline}

 

</div>
);
};

export default Card;

Adding Styles to the Task List

Add the following code to App.css:

.task-list {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.column {
width: 30%;
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}

.card {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}

Running the Project

Run the project and add an item to the task list. The output should look like this:

Draggable Event Listeners

The React-Draggable API supports several callback methods to track the movement of the draggable element:

• onDrag(): Triggered when the drag event is in process
• onStart(): Triggered when dragging starts
• onStop(): Triggered when dragging stops
• onMouseDown(): Triggered when the mouse is pressed on a draggable element
• onMouseUp(): Triggered when the mouse is released on a draggable element
• onTouchStart(): Triggered in the touch environment before drag start
• onTouchEnd(): Triggered in the touch environment before drag stops

Draggable Component Props

The React-Draggable component supports several props to customize its behavior:

• axis: Determines the axis on which the draggable can move (both, x, y, or none)
• handle: Defines a selector that will be used as the drag handle
• defaultPosition: Specifies the x and y coordinates that the dragged item should start
• disabled: Receives a Boolean value to enable or disable the draggable component
• bounds: Specifies the movement boundaries (parent, object with left, top, right, and bottom properties)

Handling the findDOMNode Deprecation Error

To avoid the ReactDOM.findDOMNode() deprecation error, pass a nodeRef as shown in the example:

import { Draggable } from 'eact-draggable';

const MyComponent = () => {
const nodeRef = React.createRef();

return (
<div>Drag me!</div>
);
};

By following this tutorial, you’ve learned how to create a task list with draggable components using React-Draggable. This library provides a simple and efficient way to add movement to your React components, enhancing the overall user experience.