0:00
uh hello guys welcome to this video so
0:02
in this video I'll show you a reacts
0:04
drag and drop uh module third party
0:08
module so where you can actually drag
0:10
scroll your HTML elements with your with
0:13
your mouse here so it actually turns
0:16
touchscreen here you can control your
0:18
elements using your mouse you can drag
0:20
them scroll up right and left like this
0:23
you can see that so it actually allows
0:25
you to turn your HTML elements just drag
0:29
them scroll up uh left and right right
0:32
in the browser you can just you can see
0:35
you can control them so this is actually
0:37
the module uh if you go to
0:40
npmjs.com just search for this module
0:46
dragable scroll this is the third party
0:49
module here and uh just search for this
0:53
uh the command is very
0:55
simple this This is a command to install
0:58
this it's almost having 40,000 installs
1:02
so it can the HTML elements can contain
1:05
images it can contain list of data as
1:08
well you can control them using your
1:09
mouse and now to get started it's very
1:12
easy to integrate uh you simply declare
1:14
the functional component and after that
1:16
you simply import this by using the
1:18
import statement and you simply say use
1:25
dragable and this will be coming from
1:27
this package here react use dragable
1:30
scroll you simply import this using this
1:33
import statement after you now imported
1:36
this now you can safely use it inside
1:38
your ReactJS application so for this we
1:40
will declare a user ref hook and then we
1:45
simply use this which is use dragable
1:49
hook we'll pass this reference
1:52
and now you come to the JSX wherever you
1:56
need to display the elements right here
2:00
you can use some tailwind classes
2:05
so we just declare some horizontal
2:10
will display in the x-axis
2:21
so these are all tailwind classes here
2:32
and so after that we will have a bunch
2:36
of elements right inside
2:42
that so we will have a bunch of boxes if
2:46
now so now to attach events to this we
2:50
just need to attach some properties to
2:52
this first of all your
3:01
so you just attach this after now
3:07
now it becomes dragable all these
3:10
elements becomes dragable you can easily
3:12
drag them using your mouse here left
3:15
right you can see that how easy it is
3:18
now so this actually third party module
3:21
makes it very much easy for turning any
3:24
HTML element to a dragable element you
3:27
can drag them scroll up everything you
3:30
can do that you can see it can contain
3:32
images list of data anything it can
3:35
contain you can make any element turn
3:37
into dragable element using this module
3:40
simply require it at the very top using
3:42
the import statement then to simply
3:45
declare this and simply attach to
3:48
whichever element so here we are simply
3:49
attaching it to this div element and
3:52
this contains a bunch of boxes which is
3:56
we're using some Tailwind CSS to design
4:00
this but this can contain anything it
4:05
videos you can see we are dragging it
4:07
with our mouse so this was the module
4:10
guys uh you can turn any element to a
4:12
dragable element very easily inside
4:15
ReactJS and also check out my website
4:19
freemediattools.com which contains
4:20
thousands of tools regarding audio video
