Create Draggable Components in React

Drag-and-drop functionality is a common requirement in modern web applications, and React makes it easy to implement this feature with the help of the “react-draggable” npm package.

In this tutorial, we’ll guide you through the process of creating draggable components in React using the “react-draggable” library. This package simplifies the implementation of drag-and-drop functionality, providing a smooth and responsive experience for users.

Step 1: Install react-draggable

Before getting started, make sure you have a React project set up. If not, you can create one using the Create React App or your preferred method. Check the tutorial on how to setup a react project?

Once your project is ready, install the “react-draggable” package using the following command:

npm install react-draggable

Step 2: Import react-draggable

Now that you have the package installed, import the “react-draggable” component into your React file where you want to implement drag-and-drop functionality.

import React from 'react';
import Draggable from 'react-draggable';

After importing the “react-draggable” package, you can implement it in your react component using the <Draggable> tag and wrapping the HTML inside this tag.

Step 3: Styling the Draggable Component

For a better visual experience, let’s add some basic styling to our draggable box. You can customize the styles based on your project requirements.

.draggable-box {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
}

Step 4: Making the Component Draggable

The “react-draggable” component allows you to make any HTML element draggable. By wrapping your desired component with the “<Draggable>” component, you enable drag-and-drop functionality.

import React from 'react';
import Draggable from 'react-draggable';

const DraggableBox = () => {
  return (
    <Draggable>
      <div className="draggable-box">
        Drag me around!
      </div>
    </Draggable>
  );
}

export default DraggableBox;

In our example, the draggable box is wrapped with the “Draggable” component. The user can click and drag the box around the screen.

Step 5: Controlling Draggable Behavior

The “react-draggable” component provides additional props to control the behavior of the draggable element. Let’s explore some of these props:

• axis: Restricts the dragging to either the ‘x’ or ‘y’ axis.
• handle: Specifies a CSS selector or an element that acts as the handle for dragging.
• bounds: Sets the boundaries within which the element can be dragged.
• onStart, onStop, onDrag: Callback functions triggered on the start, stop, and during the dragging process, respectively.

Here’s an example using some of these props:

import React from 'react';
import Draggable from 'react-draggable';

const DraggableBox = () => {
  const handleStart = () => console.log('Drag started!');
  const handleStop = () => console.log('Drag stopped!');
  const handleDrag = (e, ui) => console.log('Dragging...', ui);

  return (
    <Draggable
      axis="both"
      handle=".draggable-box"
      bounds={{ top: -100, left: -100, right: 100, bottom: 100 }}
      onStart={handleStart}
      onStop={handleStop}
      onDrag={handleDrag}
    >
      <div className="draggable-box">
        Drag me around!
      </div>
    </Draggable>
  );
}

export default DraggableBox;

Customize the props according to your specific requirements to achieve the desired behavior.

Related Links

• How to Make Axios PUT (Update) Request in React?
• React useRef Hook Tutorial – A Complete Guide
• How to Conditionally Add Props to React Components?
• Create React Application Using Multiple Components
• How to Import Bootstrap in React JS?

Conclusion

You’ve learned how to create draggable components in React using the “react-draggable” npm package. This drag-and-drop functionality enhances user interactions and can be customized to suit various applications. Experiment with different props and styles to create a seamless and intuitive experience for your users. If you encounter any issues please do let me know in the comment section or if you want to explore more features, refer to the official documentation of “react-draggable” for additional guidance.

FAQs