Approach to use react-draggable

We’ve showcased the utilization of the react-draggable module in our ReactJS application. By importing and incorporating the Draggable component into our main App component, any content within it becomes draggable across the screen using the mouse. As illustrated in the accompanying GIF, a div containing the text “This line can be moved now!” exemplifies this functionality.

Draggable Props:

• defaultClassName: It is used to denote the class name for the draggable UI.
• 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.
• 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.
• scale: It is used to denote the scale of the canvas where the dragging is performed.

In React JS, the react-draggable module facilitates element dragging by utilizing CSS Transforms, enabling items to be draggable from any starting position. To implement this, the following approach can be employed in ReactJS.