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

Recent Post

  • LLMOps Essentials: A Practical Guide To Operationalizing Large Language Models

    When you engage with ChatGPT or any other Generative AI tool, you just type and enter your query and Tada!! You get your answer in seconds. Ever wondered how it happens and how it is so quick? Let’s peel back the curtain of the LLMs a bit. What actually happens behind the screen is a […]

  • Building Intelligent AI Models For Enterprise Success: Insider Strategies 

    Just picture a world where machines think and learn like us. It might sound like a scene straight out of a sci-fi movie, right? Well, guess what? We are already living in that world now. Today, data, clever algorithms, and AI models are changing the way businesses operate. AI models are serving as a brilliant […]

  • Introducing Google Vids in Workspace: Your Ultimate AI-Powered Video Creation Tool

    Hey there, fellow content creators and marketing gurus! Are you tired of drowning in a sea of emails, images, and marketing copy, struggling to turn them into eye-catching video presentations? Fear not, because Google has just unveiled its latest innovation at the Cloud Next conference in Las Vegas: Google Vids- Google’s AI Video Creation tool! […]

  • Achieve High ROI With Expert Enterprise Application Development

    Nowadays modern-day enterprises encounter no. of challenges such as communication breakdown, inefficient business processes, data fragmentation, data security risks, legacy system integration with modern applications, supply chain management issues, lack of data analytics and business intelligence, inefficient customer relationship management, and many more. Ignoring such problems within an organization can adversely impact various aspects of […]

  • State Management with Currying in React.js

    Dive into React.js state management made easy with currying. Say goodbye to repetitive code and hello to streamlined development. Explore the simplicity and efficiency of currying for your React components today!

  • How Much Does It Cost to Develop an App in 2024?

    The price of bringing your app to life typically ranges from $20,000 to $200,000. This cost varies based on factors like which platform you choose, the complexity of features you want, and the size of your intended audience. However, costs can climb even higher for more complex projects, reaching up to $350,000.