We can use the react-draggable module in ReactJS for making elements draggable. Internally the draggable items are moved with the help of CSS Transforms. This module allows the items to become draggable regardless of their current position. We can use the following approach in ReactJS to use the react-draggable module.
Approach: In the following example, we have used the react-draggable module to demonstrate how we can use it in our ReactJS application. We have imported the Draggable component from the library and used it in our main App component, now whatever the content is present inside this Draggable component, it can be dragged with the mouse across the screen. Like in your below example, we have a div with the text This line can be moved now! which is draggable as shown below in the below-attached gif.
Draggable Props:
- allowAnyClick: It is used to allow the dragging on non-left-button clicks if this value is set to true.
- axis: It is used to determine on which axis the draggable can move.
- bounds: It is used to denote the movement boundaries.
- cancel: It is used to denote a selector which can be used to prevent drag initialization.
- defaultClassName: It is used to denote the class name for the draggable UI.
- defaultClassNameDragging: It is used to denote the default class name for the dragging movement.
- defaultClassNameDragged: It is used to denote the default class name for the dragged movement.
- defaultPosition: It is used to denote the default x and y coordinate where the dragging should be started.
- disabled: It is used to disable the component.
- grid: It is used to denote the x and y coordinate where the dragging should snap to.
- handle: It is used to denote a selector which is used as a handle that initiates the drag.
- offsetParent: It is used to pass our own offsetParent for drag calculations.
- onMouseDown: It is a callback function that is triggered on the user mouses down event.
- onStart: It is a callback function that is triggered when dragging starts.
- onDrag: It is a callback function that is triggered while dragging.
- onStop: It is a callback function that is triggered when dragging stops.
- nodeRef: It is used to pass the node ref element to the underlying component.
- position: It is used when the user wants to have direct control of the element. It makes the item controlled.
- positionOffset: It is used to denote a position offset to start with.
- scale: It is used to denote the scale of the canvas where the dragging is performed.
Creating React Application And Installing Module:
-
Step 1: Create a React application using the following command:
npx create-react-app foldername
-
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
-
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-draggable
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from 'react'; import Draggable from 'react-draggable'; export default function App() { return ( <div style={{ display: 'block', width: 700, padding: 30 }}> <h4>React-Draggable Module</h4> <div style={{ width: 660, height: 'auto' }}> <Draggable> <div>This line can be moved now!</div> </Draggable> </div> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Reference: https://www.npmjs.com/package/react-draggable
