Drag and Drop in React with React Beautiful DnD

Dragon drop is a common interaction that allows you to move things around in a UI to add Dragon drop to our app we're going to use react beautiful DND which allows us to add this library and easily add it to our project so to get started I created this simple list of characters from the TV show final space this currently doesn't have any kind of interaction it's just a text list with a little bit of styling in the code we can see that I'm creating an array of all these characters with some image references and then I'm looping through inside of an unordered list and creating each list element and then I'm adding my CSS which allows me to style it a little bit so when adding react beautiful DND the first thing we want to do is add the package to our project so we can go yarn add react beautiful DND copy and paste that right from the GitHub page and we can install it and once that's done we can run y start again to start up back our project and we should see no changes in our app yet now that we haven't installed the first thing we want to do is add the drag drop context this is going to allow the library to actually be able to see into the components so it can provide the logic to make the dragon drop work so at the top of our file we can import our drag drop context from react beautiful full DND and then we can wrap our entire list with that drag drop context component and again if we look at the page we should still see no difference next we want to add the droppable component this is going to set up the area where we can have our individual items moved around so similar to before we want to add this to our import statement and again we can wrap our list with that droppable component the difference is this time we're going to wrap it in a function that's going to allow us to pass additional information from the droppable component we're going to add an argument of provided which then on our top level list we're going to spread provided droppable props we're also going to provide a ref with a value of provided inner ref and finally on our droppable component we want to add a droppable ID which we can really set to whatever we want but let's set it to characters so we know what it is and if we load the page we can still see that nothing is happening yet we set up our list so that we could use it for a dragon drop area but we haven't made those individual items draggable yet to make our items draggable we're going to use the draggable component with this we're going to wrap each item that way we can set it up to be used within that our dragable area so to start we're going to import dragable from react beautiful DND and we're going to wrap each of our list elements with that draggable component just like we did with our other components let's also move this key up to our dragable component here we want to also add a dragable ID which we can set to our ID and we also need to set an index which for this we can also add the index argument from our map statement and we can pass that right into index finally just like our droppable component we want to create a new function where we're going to pass in details just like before here we're going to set the same argument of provided where we're going to spread our provided dragable props we're going to set a ref of provided inner ref and for this list component we also want to add one more which we're going to spread out provided drag handle props now if we reload the page we can see that as soon as we hover over an item we can actually move it around but if we notice at the bottom anytime we move something down our footer moves up into our our area if we open up the console we can see it's because we're not providing a placeholder value to fix that at the end of our list we can add another value called provided placeholder and if we reload the page we can move it around and see that our spacing isn't getting messed up and we also can see that we're not seeing that warning in the console finally the last issue is if we move an item around we can see that it doesn't save its state anytime we move it it doesn't save where the location was and reverse right back to its original location to fix this we're going to take advantage of the on drag end Handler that we can pass right into drag drop Conta text with that we're going to take advantage of react state so that we can save the order of our list so to start I'm going to import Ed state from react I'm going to create a new instance of state and we're going to call that characters we're going to add the function to update characters which comes from use State and we're going to set our default State as final space characters then if we switch our final space characters map to the characters array we can see that nothing has yet changed we're just using our state on our drag drop context component we're going to add a new function called on drag end and set it equal to handle on drag end which we're going to create that new function called handle on drag end we're also going to pass in an argument of result which we can then add a console log so we can see what that value looks like and now when we move an item we can see that object console log out and we can see things like destination which is the index of where it was moved to and the source which is where it originally came from so in this function I'm going to paste in this little snippet here we're going to create a new array from our characters array called items with that new array called items we're going to use splice to find out that original index and we're going to remove that from the aray when we remove it it gets returned as a new item so we can grab that value to use later next we're going to go back to our items array and we're going to use splice again but this time we're going to find the destination index because we then want to inject that item back into the array at its destination value and finally with our updated items array we can update our characters back to that items which will update our state and once that character state is updated it'll go back through and remap all of our items so now we can go back to our page and move around little kado or moon cake and we can see that they keep their place finally as one last thing if we drag our characters outside of that area we can see that we get an error the issue is when we try to splice it we don't actually have a value from the result because we tried to drag it outside of the droppable area to fix this inside of our handle on drag end function we can make sure that if the result destination object does not exist we can return out of that function and now if we try to move somebody outside that dropable area we can see that it just snaps back and doesn't throw an error so if you follow along with me you learned how to add drag and drop capabilities to a react app using react beautiful DND makes this easy with a great API that we can really customize to whatever we want if you like this video make sure you hit Thumbs Up And subscribe for future updates thanks for watching

Channel: Colby Fayock

Views: 160,973

Keywords: 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, reactjs drag and drop component, how to react js drag and drop, drag and drop tutorial, drag and drop tutorial javascript, js drag and drop tutorial, react drag and drop tutorial, react beautiful dnd, react beautiful dnd tutorial, react beautiful drag and drop

Id: aYZRRyukuIw

Length: 5min 51sec (351 seconds)

Published: Thu Oct 01 2020