React Drag And Drop Tutorial - React-DND Made Simple

[Music] hey guys how's it going i'm back here with another video and today i decided to bring this tutorial which some of you guys have requested me in the past but i never got to actually make it however today i'm gonna do it and we're basically going to go over how you can build uh some drag and drop functionality into your react application this is a really awesome functionality that you connect to your project this definitely adds some value to your project it definitely makes it look a lot better uh it is a functionality that is really interesting and i just created over here an example project of what we're going to be building to teach you guys how you can actually use the library and how you can actually make this work so this is what we're going to be building you can see i have some sort of items that i want to drag and drop in this case they're just images as you can see i got i grabbed like images of my face uh probably they're like my profile pictures of like my youtube channel and my linkedin and stuff but basically what i want to do is there's this div over here and i'm not caring a lot about styling at all but what i want to do is i want to be able to drag an image and just drop it inside of the div and you can see that when i drop the image it's now over here i'm going to drop this one over here it will also be over here and you can see i can keep adding the images and it will be completely fine uh the order also doesn't matter like i i can put it like this and it will have a different order uh there's many other things that you can do we can definitely add some functionality at the end to like when you drag and drop this this will disappear but i don't think it is as important for the tutorial the important parts are understanding how the library works understanding how the logic works and knowing how to implement this in your own project so now that we know what we're going to be building if you guys could leave a like and subscribe if you're not subscribed i would massively appreciate it it will help push my videos to more people uh i would be very happy if you guys could do that because i'm putting a lot of effort into the channel so it would just i would just be very grateful if you guys could support it so that's basically it and now that we have that done let's get into the tutorial okay everyone so as you can see right here we have a brand new project there's nothing in it um i just deleted some of the files that already come with the create react app command but basically we have nothing inside of our project and we're going to build this from scratch so in order to make this work we're going to be using a library called react drag and drop that's that's literally the name of the library we're not going to actually implement this at all on our own and the reason why we don't want to do that is because it is too much work while you can just abstract the logic for it whilst using some well-defined library like the one we're going to be using today and in order to install it i already actually installed it here you will need to install and run the command yarn i'm just going to open this up and just open like this in my case i'm using yarn so i would write yarn add react dnd like this and then you need to install react dnd html backend so i'll just copy this and paste it over here if you're using npm it would be npm install and the name of the packages that i just mentioned but you just run this command to install the packages and it should be all fine so after you install the packages it should be completely fine to actually start implementing the feature into your project and one thing you need to understand this if you're going to implement drag and drop you need to wrap the highest order component with uh some sort of provider that already comes with the drag and drop library so i will import this over here this this provider just serves to alert the library that the following components inside of this provider will have access to this functionality so in order to implement it we just need to import from let me just say from react dnd and we're going to import over here the dnd provider like this and then we'll just come right over the highest order component which right now it's the app because it is the it is the first component that renders uh when you enter into your application and before everything we're going to wrap it all around with the dnd provider like this so i'll just wrap this around and this all everything inside of this should now have access to this functionality and one thing we need to do is we need to import um from the library that we installed the react dnd html back-end and i'm going to say import from this one over here we need to import what is known as a back-end in order to make ours work and the one we're gonna import is the html5 back-end um i wouldn't worry that much about the specific uh core components of this library if you want to check it out they have the whole code because i believe it is open source and you can just check how the code understand how they create their components how they create their providers their contexts and just understand how the library was actually made but for simplicity reasons and for reasons that most people will actually never need to know that they will probably just want to implement the library and use it in their application i won't be going too deep into that however all you need to know is that when you put your provider you need to pass a backend property like this and the backing property you're going to be passing is the html5 back-end that we just imported and now that this is done everything inside of this wrapper over here will have access to the functionality and it will be working perfectly so what we want to do is i actually want to create a components folder and i'll just say components like this and instead of this components folder i'll create a component which let's call it a drag and drop drag drop dot gs and this actually will be the component which will include just like both the drag functionality and the drop functionality um it's it's basically where we're just going to render the the app inside of it so uh let's come over here uh you can see i created the component by using the snippet or fce if you don't have that that's an extension but basically i created the component over here and inside of it i actually want to take this off and divide this into some fragrance because i'm going to actually divide this project or this component into two different divs and the first one is going to be the div containing the the like the pictures so what i'm going to use to drag so i'm just going to give it a class name of i don't know pictures like this and then i'm going to have another div which is going to be the the drop right so it's going to be the the div which contains the the little box where you can drop stuff and i'm going to call this uh board because i imagine it's like uh you have some pictures and you're i don't know attaching them to a board and now what i want to do is i want to come here to our app.js and i just want to import the the drag drop component so drag drop and over here i'll just say import uh drag drop from uh the path that has the component right so over here so you can see that we're able to actually render the component we currently don't see anything in our screen however what i want to do is i want to grab those images and just basically display them inside of this div so to do that what i want to do is i want to create a list of images right over here i actually created over here and i'll call it a picture list this is just a list of stuff that i might be able to to to to drag one thing that is important to understand in this library is the fact that uh every single like object every single element that you wanna make it so that that thing is being like has the ability to be dragged needs a different implementation of the use drag hook which i'm going to explain later on um there's this hook from the library where if you want to make something uh to be draggable if that if that even isn't word uh you need to create use that hook every single time so what i like to do is i like to separate the logic and create a separate component which contains the hook and contains the logic for dragging and just map through a list for example in this case pictures so that each picture already contains the logic and each picture it is it is in itself draggable so what i want to do is i want to create this list over here and each item each image will have two different properties one of them is going to be an id and the other is going to be something like a url to that specific image the reason why we have to use an id is because we want to have some way to identify so if you recall in the project what we're going to do is we want to basically drag the images over here and put them over here so we need to have some sort of way to identify them and a great way of doing this is just matching each element that you make able to be dragged with some sort of identifier like an id so in this case we're gonna have three pictures so as the example i showed so i'm just gonna copy this three times and i'm gonna create the three ids that i want so one two and three and i'm going to paste the urls right here and i'll be back in a second because i'm just grabbing images from google okay so as you can see we i just pasted all the links that for the images that i showed in the beginning and this is basically done this is the structure of our picture list and what we want to do now is we just want to display this picture list right we just want to see them in our screen so to do that i'm going to come here to our div i'm going to map through this list by saying picture list dot map and for each element in this list all we want to do is we want to grab the element and call it picture and then return uh something right we want to return something that shows uh information about this picture so as i mentioned before the way we're going to do this is to make every single one of these pictures draggable we're going to create a separate component over here and call it picture.js and over here we're going to implement all the logic for making like some sort of element be able to be dragged um so that now the all of them will have this implementation and all of them will be working independently from each other so in order to make this work uh for each element in the list we want to return a picture component like this picture and i'm going to import this at the top so i'm going to say import picture and it will automatically go and what we want to do is we want to have access to the id and to the url of the picture inside of this component right because what this component will return is just a single image tag like this which will be the image we're going to display and inside of this image tag we want to display the url but we don't have access to the the url the url exists inside of this picture object because picture list is a list of objects and each object contains a url so what we're going to do is we want to pass this as props over here at the top and the two things that we're going to grab as props is the id and the url so i'm going to pass that url over here because we can pass it now like this we can come over here and say url equals to picture dot url and then for the id we'll just say id is equal to picture dot id now the reason why we're accessing the id is not clear right now because it will be very useful uh when we start actually implementing and being able and adding the functionality to attach the image over here when you drop it so for the first part you'll just assume you need this id and it will become clear why we're using it later on so let's start by implementing the dragging functionality so to do that we need to come to our picture.js because this is the elements that we want to see right if i refresh this it should have been rendering the images let me take a look why it's not rendering oh it's not url i'm sorry about that it's actually src uh completely i don't know why i thought it was url and you can see my my beautiful face appears uh but obviously it's huge so what i want to do is i want to set a width to each image to 150 pixels and by the way the code for this is all in the description so if you just want to check it out uh feel free to to do so um if you just want to copy and paste the code that's completely fine as well one thing i want to do is uh i already wrote some css over here for all of this and i just want to import the css here at the top so i'm going to say import and then two slot slashes and then app.css like this it's just that i want to make so that both this board and the images appear like i was showing the beginning and everything looks a little bit better so right now you can you like you can drag an image on every website because that's just a functionality that you can do but obviously there's no detection no one is like it doesn't do anything if i drag it and we want to change that right so to do that we're going to come to our picture.js which is where our images exist and we want to import some stuff here at the top so the first thing we want to import is uh the use drag hook from the react dnd library so react dnd like this and this hook over here it is extremely important for every element that you want to make draggable again i don't know if that's a word but for every element that you want to make draggable uh you need to create you need to call this hook again so what we do is we come over here we say const then we put brackets then we can grab two things the first thing we need to grab is a variable which is a boolean which determines if you're currently dragging something or not and you call it is dragging it will return true if you're dragging the element and will turn false if you're not dragging the element and then you need to grab this thing called drag and this will be used to to reference which element you want to make draggable and then over here we're going to set the sql to use drag like this and then over here we need to pass not a function or it is a function but it returns an object like this and the object that it returns it contains some pieces of information the first one is it returns it needs a type and every element in react dnd requires a type so what do i mean by a type well in this case uh we're trying to drag images we're trying to drag like pictures so what we need to do is very simple we just need to give this a type just give it a string which determines uh what kind of thing we're trying to drag in case you want to drag different things different ways uh you might different have different types you might want to create an external object or an enum if you're using typescript to hold all the different types you have right now for simplicity reasons i'm just going to write that the type is called image like this and i just invented this name there's no reason if you're using something else if you're dragging a div you can use you can write div whatever you want this is just an identifier and then inside of here we want to pass a collect property which in itself it will contain a function which returns the following it will return actually just like we did above it will return an object and this object will contain one property which is is dragging so we're passing that we're using the is dragging over here and over here what we want to do is we just want to ask okay uh we're going to convert this into a boolean and we're going to say monitor because we need to grab monitor from this function it's the argument to the function monitor dot is dragging and this is a function so we'll just do it like this and this should be working right now i'll explain a little bit better what this is but let's just test to see if this is actually working what i want to do is i'll just write some very simple here example uh let's make it so that i'll give it to some style and let's make it so that if you're dragging the image it will contain a border of two pixels actually i'll do it like this uh five pixels solid and pink if and only if uh is dragging is true so i'll say if it's dragging then we wanna set this border else we want to set the border to be equal to 0 pixels so let's test to see if this is working if i start to drag this it doesn't work and the reason why it doesn't work is because we haven't actually referenced the element that we want to drag so we grabbed this value over here called drag but we haven't used it yet so the way we identify which element in our html we want to make draggable is by basically coming over here and just saying ref passing a ref and then using that drag as the reference like this and now if i come over here and i try to do this you'll see that when i'm dragging it it will have the pink border but when i drop it it will eliminate the pink border same thing with the other ones because we are generating them individually through the loop so this is it means it's kind of working uh obviously this is not the whole point uh of the tutorial we're going to start using this logic to implement implement more complicated stuff but at least we know that it is working okay so now that we have this basically done um i just want to quickly talk about the collect function which i mentioned that i was going to explain a little bit better after we just finished writing the code basically what the collect function does is you can actually define different states and props that are accessible throughout many different uh like all the times you you call the use drag hook so in this case what are we passing is that is dragging a variable over here and the reason why we're passing this is because we need to take into account if it is draggy or not we don't really need to use it i'm just using this because i wanted to show you guys the example but technically this collect function is optional you don't need to actually pass anything but if i want to keep track of information like if it is dragging or not this is how i define it over here we have the monitor which you can take a look at all the properties you can access all the functions that the monitor contains but one of them is that is dragging function which it returns true or false where like based on whether or not you're currently dragging the object or not so this is just a way to access this state and destructure it over here so that we have access to this kind of information but if you if you don't want to access the is dragging boolean then you don't really need to the collect function is optional but now that we have this done let's actually start working with uh the dropping functionality and the way we're going to do this is we're going to come over here to our drag drop component right over here and i want to come here to the top and what i want to do is i want to basically uh create a a state and i'm going to call it uh the board so it's just a state that is a list and let's call it board and pass the function set board and the reason why we have this is because this over here will be the state representing uh what images are inside of this uh little box over here this is what this is how we're gonna manage this we're to have a list and as we drop every time we drop one of these images over here we just add them to the list so we need to have this board currently over here and if for some reason for example just to show you guys if this image over here the third image was inside of this let's just see how it would look let's put it over here as an example initially it will start empty but for now let's just put it as an example and over here the board what we're going to do is we just want to loop through everything wait let me just do it like this uh we just want to loop through the board list by saying board.map and over here we'll grab the picture because the board will contain pictures and exactly the same as what we did over here we're just going to return each picture like this and just grab the url and the id so now that we save this you'll see that this image would be over here because we set it to be the the image inside of the list if we wanted to add another image we could have just put this over here and you see the other image appears over here but what we really want to do is we want to be able to uh have the list empty initially so have it like this and whenever we drop it inside of the inside of this space over here we add it to our list and to do that we need to use something called the use drop hook and that comes also from uh react dnd we're gonna say use drop like this and i i'll just uh save from reactd like this and we'll just uh play around with the hook by saying const and we're going to open and close like this right now we can grab similar to the use drag we can grab a certain piece of information from our from from dropping and in this case this variable is called is over and then we also need to grab the reference object that we're gonna pass to our drop station so similar to how we did with the drag one uh we need to grab a reference and put it to the object where we want to reference our drop right in this case we're going to pass this drop uh reference inside of our board because we want to be able to use the whole board as the drop area so we're going to say ref and pass the drop over here and now what we're going to do is we want to set this equal to use drop like this and we'll just pass similar to the use drag we'll pass a function that returns an object like this and inside of here we're going to have a little bit it's going to be a little bit different from the use drag what we need to take into account in this case is first of all we need to tell what kind of objects we want to accept and this is one of the interesting things uh over here and we're not ac we only we said that the dragging is of type image so we can only accept elements of type image and down here what we need to pass is a function that is called whenever you drop the item so what kind of function will this be in this case well let's just think of that about it this way we want to add whenever we drop something over here we just want to add that image to the board list so what we can do is we can actually create a function over here call it add image to board and set it equal to a function which takes in an id for the for this specific item and we're going to use this id as the the actual uh element that we're using and we're going to use this id as the identifier for us to be able to add the item to our list and how do we have access to this id you might think well with the draw function we can grab the specific item that we just dropped by passing it over here like this and we can call the the add image to board a function like this and each item will have many different properties including if we recall over here we can pass stuff for the item for example i can pass an item property over here and inside of it pass an object containing properties for this item so that we can have different identifiers and here comes where we're going to use the id each item has a different id so what we do is we can just pass an id property over here and just say that it is equal to the id that we passed in the props so now what happens is each item will have a different id and we can identify them by saying item.id inside of the add image to board function i hope this isn't confusing uh all we're doing is uh we're just trying to identify which image we want to add to the board list so that we actually drop it inside the correct image inside of here so what we like to do now is we want to have make it so that we actually are creating this is over a variable over here i mentioned or in the picture component that in order to have access to the property determining if we're dragging or not we have to use the collect function and this it's the same way with a drag with a drop with a use drop hook we have to come over here past the collect function and instead of passing is dragging we need to grab the is over and we're going to monitor is over like this and now we have access to it and why do we need the is over well it's just for in case we want to i don't know change the background color change the screen uh just to see like if we actually dropped something what i like to do sometimes is maybe change the color of of or maybe like uh just change the color of this a bit to make it look a little bit better uh we're not going to deal with this right now what i want to do is i want to basically write the logic for the add image to board and see if it's actually working so what i want to do is i'm just going to console log the id whenever this function is called so that we know if we're actually correctly managing like for actually correctly dropping the images so just open our console and let's try to drag and drop this image inside of here you can see that if i drop there should be a console log of the id and that's exactly what happened if i try with this one it's two and this one is three and if i try dropping this somewhere else like here nothing happens because we're dr actually dropping it in the correct place but if i drop it here it works perfectly so it means we're actually again it's actually working which is amazing but now we need to write some simple javascript which will allow us to grab the image the picture with the specific id from the picture list and then add that the image to our board list so to do that we'll just grab the picture list like this and we want to filter the picture list uh to only include the picture with the id equal to the id that we have in this function so to do that what we do is we just say picture list dot filter like this and we'll just filter the picture list and grab a picture for each element and just return back uh we will only want to keep the picture which has an id equal to the picture dot id and now we have a list with only one picture which is the picture with the id that we want to drop over here and all we have to do now is we just want to set the board to be the same board as before but now we want to add uh we want to grab add the new picture that we just grabbed over here by saying picture list and grab the first one because there's only one element over here it filtered out all the elements but one and we just want to grab the that one element that is in the list now what should happen is since we are looping through this board at every second uh we're gonna alter the board by adding the new picture and it should display the new picture over here if i drag and drop it now the picture is here if i drag and drop it like this it's now here and it's now here which is amazing right if you want to replace it if you want to add the functionality for replacing uh you can just do it something like this instead of saying set board with this logic you can say set board and instead of adding elements you can just set the board to have a single element and just pass the picture list like this and now what happens is you can add one picture but then you just replace it which is really cool i honestly love react drag and drop i've used it in the past and i i absolutely love it um it is a bit complicated i do understand that i'm not sure if this tutorial uh was was that good because uh it is a topic that i definitely definitely recommend watching a video first like this one just to get an idea of how it works but then checking out the react drag and drop documentation this one over here uh it is awesome it contains a lot of stuff to read just reading around it understanding how it works and looking at the examples it is amazing that's how i learned it so i would definitely recommend it also the code for this is in the description i'm going to post it in github so if you want to check it out just look at it and yeah that's that's basically it i hope you guys enjoyed it if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting two to three times a week and i would massively appreciate it will help push my videos to more people and i'm putting a lot of effort into this channel so i would massively appreciate if you guys could help it out so yeah that's that's basically it i really hope you guys enjoyed it and i see you guys next time

Channel: PedroTech

Views: 5,602

Rating: 4.9375 out of 5

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, react drag and drop, drag and drop tutorial, react-dnd tutorial, react-dnd beautiful, react drag and drop list, drag and drop, react hooks

Id: 4bzJrEETW4w

Length: 28min 42sec (1722 seconds)

Published: Mon Jul 12 2021