Building Draggable Components in React

As user interaction becomes more prevalent in today’s applications, sometimes it’s nice to use draggable elements in your apps. Consider website builders like Trello or Wix. They have drag-and-drop features that make it easy and convenient for users.

Hello everyone! In this article, I will show some simple ways to create draggable components in React using the react-draggable package.

Steps To Create Draggable Components In React

Follow the below-mentioned simple steps to create draggable components in React with the react-draggable package:

Step 1: Install npm package

After creating your React app with npm create-react-app my-app, run:

npm install react-draggable

Step 2: Add a Draggable Component

import Draggable from 'react-draggable';

Then wrap the element you want to be draggable in it like so:

<Draggable>

    <div className="box">

        <div>Move me around!</div>

    </div>

</Draggable>

We can add some CSS to the box:

.box {

  position: absolute;

  cursor: move;

  color: black;

  max-width: 215px;

  border-radius: 5px;

  padding: 1em;

  margin: auto;

  user-select: none;

}
Code language: JavaScript (javascript)

That’s pretty simple, isn’t it? Now, let’s just explore some properties in the draggable component that you can use to level up.

Properties in the Draggable component

Now let’s discuss some cool properties in the Draggable component that you can add to customize the dragging a little bit more.

1. Drag on one axis

The axis property is set to both by default so as seen in the above example, it allows the component to be dragged in any direction. Other values that you can set it to are:

  • axis=”x”: the component can only be dragged horizontally.
  • axis=”y”: the component can only be dragged vertically.
  • axis=”none”: the component cannot be dragged.

2. Track the position of the draggable

The onDrag event handler is triggered whenever the component is being dragged. We can use it to track the position of our component.

First, import the useState hook:

import React, { useState } from "react";
Code language: JavaScript (javascript)

Then, initialize the position state to store our position.

const [position, setPosition] = useState({ x: 0, y: 0 });
Code language: JavaScript (javascript)

Next, our ‘trackPos’ function which will update our position whenever onDrag is triggered.

const trackPos = (data) => {

    setPosition({ x: data.x, y: data.y });

 };
Code language: JavaScript (javascript)

And we will call this function when onDrag is triggered.

<Draggable onDrag={(e, data) => trackPos(data)}>

   <div className="box">

       <div>Here's my position...</div>

       <div>

            x: {position.x.toFixed(0)}, y: {position.y.toFixed(0)}

       </div>

   </div>

</Draggable>
Code language: HTML, XML (xml)

3. Draggable only on handle

We can include the handle property to allow drag only on that handle. For example:

<Draggable handle="#handle">

   <div className="box">

      <span id="handle">Drag here</span>

         <div style={{ padding: "1em" }}>Cannot drag here</div>

   </div>

</Draggable>
Code language: HTML, XML (xml)

Conclusion

In this article, we discussed react-draggable and how to use it to create react-draggable components. We also discussed its many properties that can remain relevant on the retractable side. Having draggable objects is useful for building interactive applications.

Posted

in

by

Aman Patel (Software Developer)

Tags:

, , , , ,

Recent Post

  • How to Implement In-Order, Pre-Order, and Post-Order Tree Traversal in Python?

    Tree traversal is an essential operation in many tree-based data structures. In binary trees, the most common traversal methods are in-order traversal, pre-order traversal, and post-order traversal. Understanding these tree traversal techniques is crucial for tasks such as tree searching, tree printing, and more complex operations like tree serialization. In this detailed guide, we will […]

  • Mastering Merge Sort: A Comprehensive Guide to Efficient Sorting

    Are you eager to enhance your coding skills by mastering one of the most efficient sorting algorithms? If so, delve into the world of merge sort in Python. Known for its powerful divide-and-conquer strategy, merge sort is indispensable for efficiently handling large datasets with precision. In this detailed guide, we’ll walk you through the complete […]

  • Optimizing Chatbot Performance: KPIs to Track Chatbot Accuracy

    In today’s digital age, chatbots have become integral to customer service, sales, and user engagement strategies. They offer quick responses, round-the-clock availability, and the ability to handle multiple users simultaneously. However, the effectiveness of a chatbot hinges on its accuracy and conversational abilities. Therefore, it is necessary to ensure your chatbot performs optimally, tracking and […]

  • Reinforcement Learning: From Q-Learning to Deep Q-Networks

    In the ever-evolving field of artificial intelligence (AI), Reinforcement Learning (RL) stands as a pioneering technique enabling agents (entities or software algorithms) to learn from interactions with an environment. Unlike traditional machine learning methods reliant on labeled datasets, RL focuses on an agent’s ability to make decisions through trial and error, aiming to optimize its […]

  • Understanding AI Predictions with LIME and SHAP- Explainable AI Techniques

    As artificial intelligence (AI) systems become increasingly complex and pervasive in decision-making processes, the need for explainability and interpretability in AI models has grown significantly. This blog provides a comprehensive review of two prominent techniques for explainable AI: Local Interpretable Model-agnostic Explanations (LIME) and Shapley Additive Explanations (SHAP). These techniques enhance transparency and accountability by […]

  • Building and Deploying a Custom Machine Learning Model: A Comprehensive Guide

    Machine Learning models are algorithms or computational models that act as powerful tools. Simply put, a Machine Learning model is used to automate repetitive tasks, identify patterns, and derive actionable insights from large datasets. Due to these hyper-advanced capabilities of Machine Learning models, it has been widely adopted by industries such as finance and healthcare.  […]

Click to Copy