React Drag and Drop Tutorial | React Beautiful DnD Tutorial

hey everyone and welcome back to roadside coder and in today's video we're gonna see how we can implement drag and drop functionality in our react.js application so this is what we're going to build in today's video our to-do list app if i go on and type so i've added a few tasks over here and you can see they appear in this active task section i can go ahead and drag and drop this in completed tasks if i want them to be completed and vice versa and we can go ahead and rearrange them in their respective position so just like this if i want this to be above this so this is what we are going to implement in today's video so without any further ado let's get started so here's i have opened that to-do list app in our vs code and let's quickly go to the terminal and start our app by typing npm start all right there we go now i would like to mention one thing that this app is made in react type script but even if you want to use this in a react javascript project you can still use it i'm gonna explain everything how you can do that but if you want to go ahead and learn how i created this app you can go ahead and watch our previous tutorial which was on react type script link will be in the description or i button above or if you want just the code of this application you can go to your browser go to github.com go to repositories i'll include the link to the repository in the description as well and just click on over here react type script taskify and you're going to see two branches over here all of the code from this video will be in the master branch and the starter code will be in this react type script tutorial branch and let's start integrating the drag and drop in our application so let's quickly understand the flow of this application if you don't want to watch the previous video so if you go to app.tsx you can see we have two states one for a single to do and another for all of the to-do's that are going to store our to-do's list so what's happening over here is we have an input field over here where we input all of our to-do's and when we enter our to-do's they get appended into this to-do list i mean this to do's state and this to do state if you go inside of the to-do's list they are being rendered over here we are mapping them inside of to do's list component and for a single to do i've created this single to-do component if you go inside of this you're gonna see we have this whole component for single to do's but again you don't need to worry about all of these things you just need to focus on the concepts that i'm going to tell you when we are going to integrate react drag and drop in our app all right cool so let's make the suitable ui changes so that we can go ahead and make it look like this so whenever we enter that to do it appears on active tasks and we should have a completed task section over here so let's go and make the changes in this particular app so i'm going to go to to do's list component and let me remove this div and i'm going to add another div called container and inside of this container dave we're going to have another div called to dose now this to do's div will be for this particular active tasks and we're going to create another div for our completed tasks so i'm gonna take this div and paste it and let's add another class over here let's say remove and inside of both of these we're gonna add some code we're gonna first of all add this span tag for the headings so span dot to do's underscore underscore heading all right and instead of this i'm gonna write active tasks and below this we're going to take this to do's state that is being passed from app.tsx and we're going to render all of the to-do's map to do and again just like previously we are going to render our single to do component over here so single to do and we are going to pass them pass it to do and we need to send to do's also great so this should work now okay it doesn't look really good right now so i'm going to fix that later so let's copy this up and i'm gonna paste this inside of our to do remove as well yeah that looks ugly so instead of active tasks i'm gonna write completed tasks so right now i'm just rendering this to doos.map inside of this but later we are going to have a separate state for completed to-do's and we're going to render that particular state over here now let's provide it some styling so that it doesn't look this ugly so go to style.css and let's start by changing this width to 95 percent and come down over here and just below above this to do i'm gonna add a container class that we created the container and we're going to provide this container cloud display flag so that it appears in one row so display flex some width of 95 percent and i'm going to bring in a few styles so that we don't have to waste time writing css we're going to add some margin top to create some spacing justify content is going to be space between so that some they have some space in between them just like this some align items to flex start so that they are aligned to the very start of the container cool now i'm going to make some changes to this to do so i'm going to remove this and change the width to 47.5 because they are taking the half of the screen right so forty seven point five percent and i'm going to remove this flex wrap and i'm going to add i'm gonna make them call them so that they appear in one row so right now if you see they appear side by side so i'm going to make them flex direction column some given give them some padding some border radius of 5 pixel and some background color so let's see yep that looks pretty good and now we should make this single to do two span whole of this div but first of all let's provide some to do's heading style so dot to do's heading it's gonna have some font size of 30 pixels provided 30 pixels now next for to do single we need to provide it full width or maybe we don't need to provide it anywhere because the display is flexed so it's all automatically going to span it yep there we go and we are going to add some transition to it so that when we hover on this it grows a little bit so we are going to add that hover as well but first let me add just transition of 0.2 seconds and let's add those hover styles just like this so when we hover on this box shadow will appear of 5 pixels and we are going to scale it to 1.03 so it's going to get a little bit bigger so see over here yep this is the animation awesome now let's come down now we need to remove inside of media query i'm going to remove this we don't need this anymore because with automatically controlled but for our to-do's when it's so when the screen is smaller than 1100 pixels we're gonna have to do's with a width of 45 percent so let's check it out yep just like that now next inside of here in our to-do's i'm going to add some margin bottom so that it looks a little bit neat in smaller screens also we need to remove this with hundred percent so that it creates a little bit spacing and we're gonna add some container styles to make them from uh top to bottom so we're gonna provide that container some flex direction of column here with width of 95 so currently it's half of it around 50 percent but we're going to make flex direction to be column yep just like this and also this completed task should have a background color of red so let's add a remove class that we added it so background color is going to be red yep that looks much better cool now i think our ui is done now let's start implementing the react beautiful dnd package into our application so i'm going to open a new tab and search react beautiful dnd let's go to this npm package and here we go we have the installation instructions over here and we have some documentation if you want to go ahead and read this you can do that so this is how the drag and drop will work so we're gonna wrap a whole of our app with this drag drop context tag and the place that is this place where all of our tools will be rendered we're gonna wrap it with dropable and one single to-do will be wrapped with draggable tag if you're unable to understand this right now don't worry i'm gonna explain everything as we go along let's go to our terminal and paste this npm i react beautiful dnd all right there we go it's installed let me close this terminal and let's go to our app.tsx and i'm going to create a new state for our completed to do's so use state completed to dose and it's going to be an empty array to begin with and it's going to be of type same to use type now if you're coding in javascript you don't need to worry about all of these types and stuff you can directly just create use state like this now we need to send both of these to our to do's list component over here set completed to do's also this thing okay so it's giving us error because we because this doesn't exist in our to-do's list so let's go ahead and add this so completed again you don't need to worry about all of this if you are coding in javascript so it it was of type to-do's array so we're gonna take this add it over here and set completed to do's now what how did we added the type to this we just hover on this and take this okay completed to do's yup that's fine all right so our app is working fine till now now how do we add react beautiful dnd to our app so we need to go to our app.tsx which we are already in so we need to wrap this with something called drag drop context so drag drop context and we're going to wrap whole of our app inside of this now we need to import it from react beautiful dnd so import from react beautiful dnd and just go over here press ctrl space control space whoops okay it's not coming oh i got it we forgot to do one thing we forgot to install the types for this particular library so whenever you install few dependencies in typescript they require you to install some types for them so i'm going to click over here and it's going to take us over here so we need to copy this line or we can simply copy this over here and just go back and open another terminal and just install these types because these types are important for this package to function properly all right there we go it has installed let me close this terminal up and now if i go and press ctrl space and click on this you're gonna see it has imported now it says an error so it requires a prop called on drag and which we are going to worry about later but don't need to worry about right now so let's go to to do list and instead of our to-do list component we're going to wrap it with something called dropable because this area right here is a dropable area this area is also a droppable area so if i type anything okay so this is going to be a draggable thing and this is going to be a dropable thing so let's wrap this inside of our droppable so right below this i'm going to add droppable and i'm going to take hole of this div and push it inside of it now this droppable is going to have an id okay so it's still giving that error on dragon so let me just add this on dragon for now just like this yeah fine so it's it has stopped giving error for there there but over here it's giving some error it requires droppable props so first of all we need to give this a droppable id so dropable id is nothing but to identify this droppable zone uniquely so we're gonna provide it let's say to do's list okay and inside of it we can we can't just put it just like this we need to pass a callback and then we need to shift it inside of there i'm going to open a curly brace and inside of a function you can say we're going to take this div and paste it now inside of this function it takes a few parameters so first one will be provided and second one i'll talk about later so first of all provide it so what is provided going to do so we're going to take this provided and provide it to our parent div of this particular droppable zone so to the parent day we need to provide ref and ref will have provided dot inner ref so that react beautiful dnd can control this as a droppable zone and also we also need to spread provided or dropable props so that is what it was asking provided dot dropable props yep that's fine cool so but still if you go on over here and do anything you you're gonna see it's still not working because we have to do a lot of things apart from this as well so let's make this droppable zone as well just like we did with this thing so i'm gonna copy this up go right over here and let's put this dave inside of here and instead of to do's list i'm gonna change its name to to do's remove okay now we need to provide it the function again just like we did with the previous one so i'm gonna shift whole of this div inside of there just like that we're gonna take provided and we're gonna take both of these things and we need to provide it to our parent dave just like this all right cool no error and still not working nothing okay yeah i forgot one thing we passed this completed to dos so we need this as well so let me keep them over here comma set completed to do's yup so we're going to take this completed to-do's and replace it with these to do's so with this this and instead of this i'm gonna put set completed to do's yep so now you're gonna see it's not gonna show anything even if we add a lot of things over here okay cool also one more thing i forgot to do is we need to send the index to our single to do's component because it's going to track which of this particular to do is being dragged don't worry i'm going to explain it in just a second so for now just follow along i'm passing this index as index you're gonna see how i'm gonna use this so again it's giving error because single to do does not exist except index right now but we're gonna make it accept it all right now let's go to single to do's and add the type for index which is going to be a number and over here as well i'm going to add index great now we need to make this single to-do's as a draggable thing so outside of this i'm gonna add a tag called draggable and i'm gonna wrap whole of this form in this draggable just like that and similarly we're gonna add the function inside of this as well but let's just provide it a draggable id and we're gonna make this drag about id so that it it should be unique right so i'm just gonna provide the id of the to-do's to this so to do dot id dot tostring and i'm gonna provide it the index so that it keeps the trap of track of index so this is the same index that we brought from the to do's list component and now inside of it let's add our function take the form and put it inside of it just like this you can see we put the form inside of this now again we need to take provided so you see this is just a similar kind of stuff we just have to set up few things and then you're good to go so inside of this we just need to provide few things provided dot draggable props so earlier we put this thing droppable props but over here we're gonna put the draggable props and another things we're gonna add drag handle props and of course we need to provide the ref so that it can control it properly yup just like that now if we go to our browser and let's add something and if i grab it you can see it's working but there's some issue over here so if i go on and grab this you can see this this thing is levitating in the air why is this happening also see if we go over here it rests over here but then goes to its original position so if i go on and make this like this it's not saving the state so we need to add this logic so we're going to add this logic later but first we need to take care of this thing why is this levitating in the air so to fix this we're gonna go to our to do's list and right over here we're gonna add something called provider provided dot placeholder and similarly we're gonna add this over here as well just like that now if i go on and grab this yep you can see it's it produces an empty placeholder for that item so if i go on over here you can see it's providing us the space to be dropped on cool but still but it's still not saving the state so let's go on and write the logic for that so if i go on to our app.esx you might remember this on drag function on drag end function so i'm going to create this function now so let's remove this and const on drag on drag end and let's add this function right over here now this on drag ends sends this a parameter called a result so we're gonna take result parameter and result parameter will be of type drop results now draw drop results so if you're coding in javascript you don't need to do this obviously but in typescript you do so drop result and you can see and you can see it has imported that from react beautiful dnd and now let's see what is inside of this result variable so let's go and log this so result and let's go to our browser open the console and if i go on and drag and drop it yeah you can see we got something so let's explore this inside of this we have two fields first for destination and other for source so what is source source is something where it came from for example if it came from over here so it's going to give this that okay it has an index of 0 in this array so it was on index of 0 and destination has where where i dropped it so i dropped it over here so it's going to have at the index of one so it went to index of one in this particular area so how do we identify in which area are we so remember we provided it droppable id so it's gonna tell us it was in the droppable id it was dropped in the droppable id and it was taken from the to-do's list so if i go on and take this and drop this over here you're gonna see the source is to do's list and the destination is to do is remove so yeah this is how we're going to implement our logic so let's find out so we're gonna take out both of these things from result so result and we're gonna take out source and destination now what are we going to do with it first of all we're going to check if there's no destination if the destination variable is empty how is that going to happen if i if we take this and wait let me just first log it yeah so if i take this and just leave it over in the empty space so you're gonna see destination is null so if the destination is null we don't have to do anything so if destination doesn't exist so we're just gonna return it otherwise second use case will be if we take this and we drop it in the same position so if the source and the destination are same then also we're gonna do nothing so if destination dot dropable id is equal to source.dropable id and it's in the same index so i'm going to copy this up paste this and instead of droppable id write index so if it's in the same index as well so return great so these were our base cases so after this we're gonna declare a variable called add and we're gonna declare two more variables first one will be active which will have all of the to do's in the to do's list state in this state so we're going to add it over here and the other one will be complete which is going to have all of the completed to do's inside of it yeah just like that now why have i assigned it to this active why can't we just directly manipulate it so again when we have manipulated our active variable we are going to provide it to our set to do state so that will be a more neat way to do this so now we're going to check from where it came from so we're going to first check the source and we're going to take it from that particular source so if first of all we're going to check if it came from to-do's list droppable id so source dot dropable id if it's equal to to do's list then what are we going to do inside of this add variable we're going to take that particular thing so active and it was in the index of source dot index right so we're going to take source dot index it we're going to take it from the source dot index and then we are going to remove it from that particular place so active dot slice i mean splice so you can see over here splice is used to manipulate the arrays remove or add inside of the array so we're gonna go to source dot index and we are going to remove it remove one item from that place that is that item which we have taken in the ad now we're going to do this similarly for to do is remove as well so else to do is remove so if it was in the complete it came from over there so we're going to take it from the complete and when i remove it from there okay cool so we have taken that particular to do now we need to add it to the destination so similarly we're gonna check if so let me just copy this up so if the source.dropable id is to do's list then what are we going to do active dot splice so now we're going to add it inside of this array okay so where do we need to add it we need to add it destination.index now since we are not removing anything so we're just gonna say zero don't remove anything but what are we doing we are adding it so we're gonna say add this add variable that we took from over here we're gonna add it over here copy this up and paste it over here and instead of active we're going to write complete and now that we have manipulated both of these variables now we're going to add it to our state so set completed todos we're gonna have is gonna have complete and set to do's is going to have active now this should work if everything seems fine yep looks good let's go ahead and try it if i take it and drop it over here okay something went wrong clearly oh for adding this we need to add this for over here we need to write destination not the source because we're checking for the destination right let's go back and try to drop it yep it's working absolutely fine so you see how easy it is to implement drag and drop in our react.js applications but wait i need to do one more thing so if i pick it up i should see some indicator that it's in the drag mode or if we hover on this this should glow up and if i hover on this this particular part should glow up so let's provide that i'm gonna go to my code and inside of my to do's list component so i told you there's one more parameter that it takes and that is a snapshot so we're going to take this snapshot and let's go to our class names and i'm going to wrap this in this curly braces and provide this template string so that we can write js inside of it and i'm going to open this curly braces and write snapshot dot is dragging over so if it's dragging over this then provided the class name of drag active otherwise don't provide it any class names similarly we're gonna do this to our completed as well so add backticks and comma snapshot snapshot dot is dragging over then drag remove or probably drag complete let's go ahead and add css for both of these inside of our styles i'm just gonna make the background color a little bit more intense so if you go on if i pick this up you can see if i hover on this it's going to glow if i have around this this is going to glow just like this and i want to increase the shadow of this to do as well when it's grabbed by me so if i go on and go to our single to do again we also have the snapshot here as well and with these to do single i'm gonna add another class so snapshot dot is dragging so over there it was is dragging over so and over here it is dragging so we're gonna it the class name of drag otherwise we're not going to provide any class name and let's add these styles for it i'm going to add some intense back background shadow i mean box shadow so in 20 pixels earlier it was 15 pixels if you remember so if i grab this you're gonna see the shadow has gotten a little bit intense awesome so you see how easy it is to implement drag and drop in a react js applications i would love to see the projects that you guys make after learning this so thank you all for watching this video if you like this video just give this video a huge fat thumbs up and don't forget to subscribe to the channel just go to youtube.com slash roadside coder and click on the subscribe button it motivates me to create more such awesome videos for you guys so thank you all for watching and i'll see you in the next video bye bye

Channel: RoadsideCoder

Views: 32,331

Keywords: drag and drop in react, drag and drop in reactjs, react beautiful dnd, react beautiful dnd tutorial, react-beautiful-dnd, React beautiful dnd typescript, react drag and drop, react draggable component, react drag and drop list, react drag and drop examples, react drag and drop component, how to react drag and drop, how to react drag and drop list, reactjs drag and drop component, how to react js drag and drop, react drag and drop tutorial, react beautiful drag and drop

Id: uEVHJf30bWI

Length: 28min 8sec (1688 seconds)

Published: Sun Aug 15 2021