Making Draggable Components in React

Subscribe to my newsletter and never miss my upcoming articles

As user interactivity becomes more prevalent in modern apps, it is sometimes nice to have draggable components implemented in your apps. Think of Trello or website builders like Wix. They have drag-and-drop elements which makes it easy and intuitive for users.

Hello everyone! In this article, I'll be illustrating some simple ways to make draggable components in React using the react-draggable package.

Step 1: Install npm package

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

npm install react-draggable

Step 2: Add a Draggable Component

In App.js, simply import the 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;
}

And that's it!

drag.gif

That's pretty simple, isn't it? 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.

An Example

Here's an example when axis = "x": draghor.gif

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";

Then, initialize the position state to store our position.

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

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

const trackPos = (data) => {
    setPosition({ x: data.x, y: data.y });
 };

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>

And the result...

ezgif.com-video-to-gif.gif

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>

And the result...

ezgif.com-video-to-gif (1).gif

Conclusion

In this article, we are introduced to react-draggable and how we use it to make draggable components. We have also discussed a few of its many properties that can further customize the draggable component. Having draggable elements is useful to build interactive apps. Check out this mini project I made of a bulletin board app that utilizes draggable features.

gif.gif

For more information regarding react-draggable, check out its documentation here. I hope this article has been helpful. Please like and share if it is. Feel free to ask any questions or share any projects you've made with this package in the comments below. Cheers!

Shamaayil Ahmed's photo

How to you create a gif and embed.

Victoria Lo's photo

I screen recorded, export it as mp4 and convert it to gif using this tool (ezgif.com/video-to-gif) and embed it on Hashnode:

![myGIF](myGif.gif)

LookRain's photo

you can probably checkout Giphy Capture, pretty handy! Victoria Lo

Subha Chanda's photo

Nice one! Simple to follow... 😀

Victoria Lo's photo

Yayy thanks!

Shammah Nei's photo

Very intuitive write-up. Def gonna use it in a project I'm working on. It really helps the user. Thanks

Victoria Lo's photo

Thanks glad its helpful :)

Chris Bongers's photo

Very cool, And looks way easier then I would have thought

Victoria Lo's photo

Haha yes, it's very easy and intuitive to use :)

Rahul Sharma's photo

I was about to skip this article, thinking it would be for beginners to learn react using some easy draggable component interface but woah!! Glad I stumbled over it. Very informative and nicely written.

Victoria Lo's photo

Thanks! I hope to see you use it in your projects :)

Rahul's photo

Amazing Post.

Victoria Lo's photo

Thanks Rahul!

Skay's photo

Love this post!! Thanks for sharing :-)

Victoria Lo's photo

No problem Skay! Thanks for reading :)

Bolaji Ayodeji's photo

Love this one, thanks for sharing!

Victoria Lo's photo

Thanks for reading Bolaji :)