React.js Project to Drag HTML Elements With Mouse Using react-draggable Library in Javascript

Welcome folks today in this blog post we will be dragging html elements with mouse using react-draggable library in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new react.js app using the below command as shown below

npx create-react-app sampleapp

cd sampleapp

And after that you need to install the below library using the below command as shown below

npm i react-draggable

And after that you will see the below directory structure of the react.js app as shown below

Drag Simple HTML5 Elements Using Mouse

Now we can modify the App.js file and copy paste the following code

App.js

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

export default function App () {

  return (
    <div className="container" style={{ height: 500 }}>
      <Draggable>
       <h1>Hello world</h1>
      </Draggable>
    </div>
  );
};

import React from 'react';

import Draggable from 'react-draggable';

export default function App () {

return (

<h1>Hello world</h1>

</Draggable>

</div>

);

};

As you can see we are importing the react-draggable library at the top and then we are surrounding the html heading inside the Draggable widget. So now you can drag the html heading using the mouse as shown below.