react draggable

Introduction

Ever wondered how drag-and-drop functionality works in apps such as Trello and how you can replicate it yourself? To create drag-and-drop methods on event interfaces, we'll take a straightforward yet effective way. We'll just use the React module react-draggable to build such an application.

React is a front-end library used to build component-based ui for applications. These pieces of code allow reusability and independence from one another while implementing certain functionalities within the program. Either functional components (stateless components that use hooks to control the application's state) or class-based components (stateful components) can be used in a React application.

The function-based components will be used in this article to develop the drag-and-drop components in a react app.

What is React Draggable?

A module called React Draggable makes it simple to add incident-free drag movement to React elements and components. This package applies CSS changes to React components, making it easy and simple to drag components around a user interface (UI).

No matter where they are in the React-Draggable interface, items can be moved about (relative, absolute, or static). The library's <Draggable /> component will take precedence over any CSS Transforms already present on the object you are dragging.

In any event, this module transforms React components using CSS, enabling users to drag components across a user interface. It offers several tools that enable us to influence the behavior of components. By building a list with draggable elements, we'll thoroughly examine the React Draggable library.

How does React Draggable Work?

Prerequisites

• Node js should be installed locally on your system. You can download Node from their official website. A Node version least greater than 10.X, you can check the version of a node using the command node -v.
• A package manager like npm (Node package manager), which is typically installed with Node js installation. NPM version should be at least greater than 5.X, you can check the version of npm using the command npm -v.
• A text editor should be present of your choice to manage your React project directories. VS Code is recommended.

You may drag React components across a user interface (UI) by using the React-Draggable module, which applies CSS transforms to React components. React-Draggable is an excellent option for building intuitive, user-friendly interfaces because it has a variety of props that allow you to modify the behavior of components.

Let us first install the react draggable library in our react app before we begin working with it. Make sure that you have a React app set up on your local computer before installing React-Draggable. Use the command listed below to start a new React project if your computer doesn't already have any.

Now move into the project directory and run the command given below to install react draggable library.

Let's check out how it performs in actual use now that our project has been configured and the react-draggable has been added.

To provide a component or element movement, we will import the <Draggable /> component from the react-draggable library that we previously added to our project.

Import the library in App.js :

The <Draggable /> component in the above code was imported from the react-draggable library using the ES6 syntax, as can be seen in the code excerpt above. Let us see a different approach to importing the draggable component via the common JS module;

To create a component or element draggable in our React app, we must wrap the desired element or component with the <Draggable /> component.

Now let us edit the App.js file in the following manner :

Draggable Event Listeners & Usage on Draggable Components

Lists of event listeners are available in the React-draggable API's <Draggable> for tracking every movement that starts a drag. The listeners receive callback functions as drag handlers along with an event and data objects as parameters. The data object also includes details about the draggable component's present location.

Likewise, let us examine what these listeners are and their potential applications:

• onDrag():
  When a drag happens, this event listener immediately calls any drag handle that was supplied to it.
• onStart():
  This event listener reads the startup-triggered dragging event. Therefore, the action will be aborted if any drag handler supplied to this event listener returns 'false'.
• onStop():
  When dragging stops, this event listener, which is tuned to the drag event, is activated.
• onMouseDown():
  When the mouse button is pressed on a draggable element, this event is started. Regardless of the handle or disabled status, this event is fired.
• onMouseUp():
  When the mouse is released on a draggable element, this event is started.
• onTouchStart():
  Before the drag begins, this event is triggered in the touch environment.
• onTouchEnd():
  Before the drag comes to a stop, this event is likewise triggered in the touch environment.

Draggable Component Props

• axis:
  Which axis the draggable can move to is determined by the axis prop. The following string values are sent to the react draggable component :
  • both - This string value serves as the axis prop's default value. Both vertical and horizontal movement is possible.
  • x - Only the horizontal axis can be moved when this string value is provided to the axis prop.
  • y - When provided to the axis prop, the string value y restricts movement to the vertical axis.
  • none - When provided to the axis prop, the string value none halts all movement in both the horizontal and vertical directions.

• handle:
  Users can drag any element or component using the selector that is defined by the handle prop. Essentially, the defined selection will change into the drag handle. The draggable part will be treated as the drag handle in the absence of the handle prop.

• defaultPosition:
  The x and y coordinates where the dragged item should start are specified by the defaultPosition prop.

• disabled:
  A Boolean value is assigned to the disabled prop. This prop makes any draggable component behave as a fully static component if the boolean true is supplied to it. If true, it does not call any drag handlers.

• bounds:
  The movement boundaries are specified by the bounds prop. It gets a string representing any of the following values :
  • parent — Moving outside of the node's offsetParent  (the closest node with position absolute or relative) is restricted by the parent value.
  • An object with properties on the left, top, right, and bottom that specify how far the draggable can move in each of those directions

Installing React-Draggable

Let us first install the react draggable library in our react app before we begin working with it. Make sure that you have a React app set up on your local computer before installing React-Draggable. Use the command listed below to start a new React project if your computer doesn't already have any.

Now move into the project directory and run the command given below to install react draggable library.

Let's check out how it performs in actual use now that our project has been configured and the react-draggable has been added.

To provide a component or element movement, we will import the <Draggable /> component from the react-draggable library that we previously added to our project.

Import the library in App.js:

The <Draggable /> component in the above code was imported from the react-draggable library using the ES6 syntax, as can be seen in the code excerpt above. Let us see a different approach to importing the draggable component via the common JS module;

To create a component or element draggable in our React app, we must wrap the desired element or component with the <Draggable /> component.

How to Drag a Div in React?

Now let us edit the App.js file. Let us import the draggable component in the file.

Then we will create a div with some content in the App.js file and also wrap it with the <Draggable /> component.

Let us add the css code in the App.css file.

Now we can also add some properties in the <Draggable /> component which will help you customize the dragging a little bit more. We can use the props as described above in the article to achieve,

• Drag on one axis
• Track the position of the draggable
• Draggable only on the handle

How do you Make a Draggable List in React?

Let's put all that we've learned into practice by implementing our megaphone music playlist.

We will just focus on the three items listed below for this article:

1. putting a list UI in place
2. putting a song list on the UI
3. Using the drag and drop function

Let us begin by using the create-react-app command to start a new React project:

Following the creation of our new project, let's use the following command to open the project in VSCode and then navigate to the project directory from the terminal:

Please refrain from closing the terminal as we must do so soon to begin our application. The index.js file has to appear like this.

Now that our project has been reorganized, we must install all of the dependencies that it requires.

Restructuring

We must first remove all files from the src folder before building our folder structure and adding some empty files to it, as seen below:

• components folder:
  1. PlayList.js
  2. PlayListSong.js
• Music folder We will include several mp3 files from this github repository or from anywhere you like.
• styles folder:
  1. _playlist.scss
  2. _variables.scss
  3. app.scss

Our index.js and App.js should now be placed in the src folder. Let us create open the src folder after moving the files and create a brand new file data.js.

Now if you haven't closed the terminal yet, install the following dependencies. Otherwise, open a new terminal and move the project directory.

Let us now add some code to the empty files that were produced after all of our dependencies have been installed. The code snippets below provide the code for every empty file:

PlayList.js:

PlayListSong.js:

App.js:

_playlist.scss:

variables.scss:

app.scss:

data.js: