Up next in 10
React.js Drag & Drop HTML Elements in Browser Using react-draggable Library
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will talk about a new
0:05
package in react chairs which allows you
0:07
to drag elements from one place to
0:09
another so we actually have this div
0:11
element so with the help of the mouse we
0:13
can drag it anywhere in the web page
0:18
so there are many situations that you
0:21
want this feature to be inside your web
0:24
applications you are building any sort
0:26
of game or any sort of web application
0:28
which involves lagging elements so this
0:31
is a great feature great package in
0:34
specifically for react CH applications
0:36
you can do this I will show you step by
0:38
step there is a package so if you go to
0:41
npmjs.com just search for this package
0:44
which is react
0:46
dragable this is the
0:49
package the component and almost 3
0:53
million weekly downloads so this is
0:55
actually the command here we need to
0:58
install it so I've already installed it
1:01
so I will show you step by step how to
1:02
do this so just make a simple functional
1:05
component and I will just require this
1:08
package import draggable from react
1:11
draggable after importing it inside your
1:15
jsx you can take any element it can be
1:18
either image or div heading paragraph
1:22
any element valid HTML element so I will
1:25
just give it a height of 100 VH and you
1:30
can even give it a background color as
1:32
well so I'm just giving this background
1:35
F9 F9 F9 so it's a gray grayish color
1:40
inside this we will have an H1 here
1:42
which will say react
1:47
draggable
1:49
demo and now I'll be using this
1:52
component draggable and it basically
1:54
takes some options the first option it
1:57
takes is in which axis you want to drag
2:00
this element so we have these choices we
2:04
have none which will not disable the
2:07
dragging if you only want to drag it in
2:09
the horizontal Direction then you will
2:11
provide
2:12
x-axis and if you want to drag it in the
2:15
vertical Direction then you will provide
2:16
y if you want both then you can provide
2:19
both and then it has some call back
2:21
functions so whenever you drag this
2:24
function will execute handle drag I will
2:28
basically Define this when the drag
2:29
dring start then this function will
2:31
execute handle
2:33
start this name can be anything but I'm
2:35
just calling it so when the dragging
2:38
stop then handle stop so all these are
2:41
call back functions so we can just
2:43
Define this one by one so handle
2:47
drag then we got handle
2:51
start when the dragging process start
2:55
when they stop it when we have handle
2:58
stop so all these three
3:00
functions we have defined it and right
3:03
here if
3:05
you now inside your draggable
3:09
component uh inside we can Define
3:11
anything it can be a paragraph simple
3:13
paragraph This is paragraph So if you
3:16
just refresh your browser what you will
3:19
see there's this paragraph that you can
3:21
move only in the x-axis which is the
3:23
horizontal if I change this to Y here so
3:27
what I will find out I can only move it
3:30
in the vertical Direction but if you
3:32
want to move it in both the directions
3:34
then we need to provide both so now you
3:37
can move it in any direction in xaxis y
3:40
AIS anywhere vertically horizontally so
3:43
this can be a div
3:46
element
3:48
so this can be image this can be
3:50
anything so let me provide a div element
3:53
with custom Styles it's a just a box we
3:57
have given some styles to it width
4:00
height background color display all
4:02
these things so it will look something
4:04
like this and you can drag it anywhere
4:06
else so this can be a very simple
4:09
example how to drag HTML elements inside
4:12
your web page using this package react
4:14
dragable the possibilities can be
4:16
endless so if you basically if your
4:20
application requires that the user may
4:22
interact with the elements they can drag
4:25
drag and drop elements this can be a
4:27
great package so for building it so
4:30
that's why it is having almost 3 million
4:32
weekly downloads so thank you very much
4:35
for watching this video and I think
4:38
inside these callback
4:41
functions inside when you whenever you
4:43
drag your elements so basically we have
4:48
passing these coordinates which are
4:50
there you can console log these
4:52
coordinates whenever you drag your
4:56
elements so inside these callback
4:59
functions
5:05
when the dragging start dragging end we
5:08
can console log the messages just to
5:10
check in the console it is working so if
5:13
I just inspect element go to
5:22
console so if you see as we are dragging
5:24
this element you will see the x
5:26
coordinate y coordinate is printed out
5:29
and and uh this is very helpful in
5:31
building out games I think the specific
5:34
Library so thank you very much for
5:37
watching this video please hit that like
5:39
button subscribe to channel and do check
5:42
out my website as well free mediat
5:44
tools.com which contains thousand tools
5:46
regarding audio video and image and I
5:48
will be seeing you in the next video
#Other
#Software