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.