uh hello guys welcome to this video so
in this video I'll show you a reacts
drag and drop uh module third party
module so where you can actually drag
scroll your HTML elements with your with
your mouse here so it actually turns
touchscreen here you can control your
elements using your mouse you can drag
them scroll up right and left like this
you can see that so it actually allows
you to turn your HTML elements just drag
them scroll up uh left and right right
in the browser you can just you can see
you can control them so this is actually
the module uh if you go to
npmjs.com just search for this module
which is react
use
dragable scroll this is the third party
module here and uh just search for this
uh the command is very
simple this This is a command to install
this it's almost having 40,000 installs
so it can the HTML elements can contain
images it can contain list of data as
well you can control them using your
mouse and now to get started it's very
easy to integrate uh you simply declare
the functional component and after that
you simply import this by using the
import statement and you simply say use
dragable and this will be coming from
this package here react use dragable
scroll you simply import this using this
import statement after you now imported
this now you can safely use it inside
your ReactJS application so for this we
will declare a user ref hook and then we
will
simply use this which is use dragable
hook we'll pass this reference
and now you come to the JSX wherever you
need to display the elements right here
you can use some tailwind classes
here
so we just declare some horizontal
elements which
will display in the x-axis
so these are all tailwind classes here
and so after that we will have a bunch
of elements right inside
this you can see
that so we will have a bunch of boxes if
you see
now so now to attach events to this we
just need to attach some properties to
this first of all your
events and then the
reference
so you just attach this after now
attaching this
now it becomes dragable all these
elements becomes dragable you can easily
drag them using your mouse here left
right you can see that how easy it is
now so this actually third party module
makes it very much easy for turning any
HTML element to a dragable element you
can drag them scroll up everything you
can do that you can see it can contain
images list of data anything it can
contain you can make any element turn
into dragable element using this module
simply require it at the very top using
the import statement then to simply
declare this and simply attach to
whichever element so here we are simply
attaching it to this div element and
this contains a bunch of boxes which is
we're using some Tailwind CSS to design
this but this can contain anything it
can be images or
videos you can see we are dragging it
with our mouse so this was the module
guys uh you can turn any element to a
dragable element very easily inside
ReactJS and also check out my website
freemediattools.com which contains
thousands of tools regarding audio video
and image