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
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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> ); }; |
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.