Up next in 10
Build a React.js Animated Draggable Lists of Images & Text Using react-draggable-lists in JSX
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/2fc3d5625ed57f44b250ced213fde4da
View Video Transcript
0:00
uh hello guys welcome to this
0:02
video so in this video I will show you a
0:05
react GS component or package which
0:07
allows you to make this beautiful
0:08
looking draggable images or list so if
0:11
you if you have a list of images that
0:13
you want to display inside your react
0:15
application with also drag and drop
0:18
support as well you can use this package
0:21
you can change the order of images you
0:23
can move this image upward you can
0:25
change the order there is a package
0:28
allows which allows you to do this with
0:30
nice little animation you will see that
0:31
as I'm moving the images it is smoothly
0:34
moving it changing the order so if you
0:37
have a list that you want to display it
0:39
can be either text images anything you
0:42
can display in the list and it's called
0:44
as react dragable list package so if you
0:48
just go to npmjs.com and just search for
0:51
this package which is react draggable
0:56
list so I think it
1:00
react dragable
1:03
list this is essentially this package
1:06
and you can install this uh by executing
1:11
this command I've already installed it
1:13
so essentially it is using react motion
1:16
which is essentially a animation
1:19
Library so it is using it in the
1:21
background so I will just show you a
1:23
very basic example so just make a simple
1:26
functional component and then we need to
1:28
import this module by using the import
1:30
statement so we'll say draggable list
1:34
which will be coming from this package
1:37
almost 22
1:38
kilobytes so now I have we have a series
1:42
of images that I want to display in my
1:44
source at assets directory if you see so
1:47
I will be fetching these images inside
1:49
my import statement so I will just say
1:52
import image
1:56
1 in this easy way I can import all
2:00
these
2:05
images so I can change the
2:20
number so after importing all these
2:23
images now I just need to make a list
2:28
where I show these images so what I will
2:30
do I will store these images paths in
2:33
Array I will call this as
2:36
images and I will image one image 2
2:40
image three image 4 image 5 image 6 so
2:45
we storing all these images in an images
2:47
array now we can inside our GSX I can
2:51
Loop through all these images inside
2:54
this have an H1 tag we will simply say
2:58
react
3:00
draggable
3:03
list I will just make it appear in the
3:06
center position so text
3:10
align will be in the center and
3:14
then I will have a
3:16
div and we will say we'll give it a
3:19
style of width of
3:23
300 and I will also give it a margin of
3:26
zero
3:28
Auto and I will now use this component
3:31
draggable list and it actually takes
3:34
some options first is the width of this
3:37
each image so I will just say width
3:39
should be
3:43
300 soorry here we can directly attach
3:46
the style Here style object so just make
3:49
the width to be 300 margin will be zero
3:53
Auto just to align it in the center
3:55
position so right here you'll be looping
3:57
through the images so we have this GSX
4:00
so say images. map and for each image we
4:05
will Loop through like this so we have
4:09
this uh you'll show the image in a div
4:12
tag and I will just
4:15
attach the key here which will be inside
4:19
index and just I will give it a style of
4:23
width
4:25
100% and a height of each image to be
4:28
300
4:30
and then I will attach my background in
4:33
the background property which is the URL
4:36
and here you simply pass the source so
4:40
we are looping through each image you
4:42
can see the paths here so we are having
4:45
image one image two image three image
4:46
four image five Image six directly
4:49
passed into the source and we are
4:50
embedding this in the URL Source in the
4:53
background so now what happens we also
4:56
need to configure the properties for the
4:58
image so the back size you can control
5:01
it using the CSS
5:06
property so background size I will say
5:10
it should be contained and I will give
5:12
it a border as well one pixel solid this
5:16
grayish color and the Border radius I
5:19
will just give it let's suppose 50 50
5:23
pixel so it actually appears in a
5:26
roundish way and I will just change this
5:30
box sizing to be border
5:37
box and now inside this now we need to
5:40
display the actual image in the
5:41
paragraph tag so right here we display
5:45
each image I will call this as image
5:48
index +
5:50
one and then we have all these uh Styles
5:53
attached to this image inside this
5:56
paragraph
6:02
so if you refresh now so what happens
6:06
uh so all these images will display if
6:09
you see image
6:18
one so I
6:25
think I've given all the source code in
6:27
the description so I just made a some
6:29
kind of type of mistake so basically you
6:32
can change the order of these images and
6:34
let's suppose I include one more image
6:37
here let me call this image
6:42
4 so in this way you can add as many
6:46
images as you
6:50
want you can
6:55
see so this is a really nice little
6:58
package where you can make basically
7:00
make this draggable
7:02
list and you can show images text
7:05
anything this is essentially this
7:07
package react draggable list so install
7:11
it and use it inside your react CH
7:13
application so thank you very much for
7:15
watching this video and do check out my
7:17
website as well free mediat tools.com uh
7:20
which contains thousands of tools
7:22
regarding audio video and MH and I will
7:26
be seeing you guys in the next video
#Online Media
#Other