Making Draggable Components in React
Tags: react, beginners, javascript, webdev
Published: 2020-12-29 02:44:13

---
title: Making Draggable Components in React
published: true
date: 2020-09-08 02:18:27 UTC
tags: React,beginners,JavaScript,WebDevelopment
canonical_url: https://lo-victoria.com/making-draggable-components-in-react
---

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](https://www.npmjs.com/package/react-draggable).

## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1598492593948/w-EjD2TC3.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1598493375998/vWjXgclUT.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1598493966925/z-K9KRMBC.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](https://cdn.hashnode.com/res/hashnode/image/upload/v1598495077636/M0ZTouQGP.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](https://victoria-lo.github.io/bulletin-board/) that utilizes draggable features. See its [repo](https://github.com/victoria-lo/bulletin-board) for the code.

![gif.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1598390335363/tk8SnOrxD.gif)

For more information regarding react-draggable, check out its documentation [here](https://www.npmjs.com/package/react-draggable). 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!