React Drag and Drop List Sort Tutorial

welcome back to the channel in this video we are going to show you how you can do some sorting using drag and drop all right so I have here a nextjs application uh basically blank right here uh we can check out the files we're just doing everything in this page. TSX right here and then I've just removed uh some of this we're using uh Tailwind for some of these stylings as you can see here and if we flip on over to our uh browser right here you can see we just have uh this list and nothing else right now so let's show you how we can do some sorting using uh drag and drop right now so the first thing we're going to do is we're going to need some state for this so let's come up here and because this is a nextjs application uh we're going to have to say uh use client right here because we want to use use State then below that we're just going to import a couple things so we're just going to be using use ref and use State and importing them from uh react like that now the next thing we're going to want to do is create this state so basically I'm just going to have a list of people you can use whatever data you want for here uh but I'll just add that here all right so we are just using some State bringing that in and we are saying people and set people and this is going to be an array and we're going to have uh four objects right here uh with IDs name and then the content uh this is this doesn't matter you can use any data you want for this but uh if you're following along maybe uh have the ID uh along with that all right so that is good now the next thing we want to do is actually uh maybe list out these different things so we can see it on the screen uh this list of items right here so let's come in and do that all right so the first thing we'll do is we'll come down uh below here and we'll Loop over these people and just display this list on a screen so let's come in we'll open up some braces here and we'll just say people like this and we'll say map and then inside here we're going to have uh person and then we're also going to need the index of uh that person this is going to be for sorting purposes and then we can come in here and we'll add a div and then inside that div We'll add a uh P tag there and we'll just pass in that person. name just like that so we can go ahead and uh save that and then check that out so here you can see here I'll bump this up a little bit uh we just have our list of people right there that is good uh let's add a little bit of styling just using Tailwind just to make this look a little bit better so on this div I'm just going to add a class name like this and we'll just add a few styles on here all right then we can check out what that looks like all right so we just have this gray uh border here uh background and a little bit of a border uh and you can see right now we can't do anything we can't drag we can't do anything so that will be our next step so let's uh add that into this all right so in order to make something actually draggable uh the first thing you have to do is actually add that let's give ourselves a little room here and we'll say draggable like this if we go ahead and save that and actually just check that out really quick uh you can see that now these are actually able to be moved like this uh you get this little effect right here here now obviously they aren't reordering or anything so we haven't set that up but it is uh possible now with that draggable label and I'm just going to close down this terminal give us a little more room in here all right so let's come in here and the first thing we want to do is we're going to say uh on drag start here and you can see when we start typing there we get all these different things here so we are going to do on drag uh start for our first one so we can go like this and inside of here we're just going to create an inline function right here we can do a separate function and write that out but we can just do this also in line like this so we'll do that for here so in here we're going to create a ref in a second called uh drag person which will be the person being dragged so we'll say drag person like this now we haven't created this yet so that won't be there uh and then we'll say do current like this and then that is going to be equal to the index and that's why we need this index to keep track of the order so on the drag start we're going to say uh this drag person that we're going to create in a minute as a ref is equal to the index okay so that's going to be our drag start so let's actually create this really quick so we can come down uh below here and right below here we can just say const and we can say uh drag person and that'll be equal to use ref like that which we already have broughten in and just for typescript we're going to say this is is going to be a uh number like this because this is just going to be the index and we can just start that at zero and we can say const and this is going to be the uh dragged over person so this is the person we're SW swapping basically with and that will be equal to use ref again and again that will be a number and again we can start at zero okay so now we have this drag person and this person that they're dragging over on top of that we want to swi uh swap them with so on drag start we're going to do this then we can come down below that and we can say on drag enter just like this and that is going to be another inline function like here and this time we're going to say the dragged uh over person and current so you need that with uh the ref there and that is going to be equal to the index then we're going to come in down here and we're going to say on drag end so this is where the drag is actually ending and that we're actually going to go and create a function so this is going to be our sorting function so we'll just say uh handle sort for now and we'll create that in one second uh and then finally we're just going to say uh on drag over and you actually don't need this functionality wise but uh I'll show you in a sec what that looks like so we're just going to say uh e for event there and we'll just say e. prevent default like that and save that all right so we have to go ahead and create this handle sort so let's come up here and we'll just say function handle sort all right so let's show you how we're going to actually uh sort this here so the first thing we're going to do is we're going to uh clone the initial people so let's say const cuz then we're going to be able to work with it so we'll say people clone like this and in order to clone this we can just spread in uh the current people array so we can just say dot dot dot uh people and that will clone uh that array that we have already so now um we're going to do a uh temporary variable now there's another way you could do this with um splice uh and splicing the two things but this is just uh one of the ways we can do it here so we'll stick with that so we'll say const and we're just going to create a temp variable here and that's going to be the uh people clone right there and that is going to be at so a specific index here so we're going to say uh drag person. current so the temp variable is going to be uh this people clone array which is basically just people right now at this specific index here which is going to be uh the current index of uh drag person so that's our temp and then we're going to go uh people clone and we're going to say drag person. current and we're going to set that equal to the people clone at the drag uh over person. current so here we're actually uh swapping these two then we can say people clone dragged over person. current and we're going to set that equal to Temp so that's going to be uh set equal to our temporary variable that we created right up there so these two lines are what's actually going to do the swap for us there so now we can come in and set people like this and we want to set it to this uh people clone that we just created here all right so we can go ahead and save that and that should handle our uh sort for us all right so now we have our uh list right here like we saw uh if we want to drag uh John Doe when Tom Johnson there you can see that that swaps it for us so come in Adam Smith for John Doe we can swap that Tom Johnson for Max Walters we swap these two different people here now of course this is doing a swap for us so if you wanted to sort the list uh in some other way where it just uh bumped the next person up or down you could also do that there one way you can just do a drag and drop in vanilla JS and kind of sort a different list like this all right well that is it for uh me the code will be in the description if you like the video give it a like and maybe consider subscribing and until the next one thanks for watching

Channel: Darwin Tech

Views: 16,368

Keywords: react js, react js tutorial, react js project, react js for beginners, react js full calendar, react web app tutorial, nextjs tut, next js tutorial 2023, next js tutorial, next js tutorial for beginners, next js calendar app, tailwind cs, tailwind css, typescript, typescript tutorial, typescript react, next js, next js 13, drag and, drag and drop react, drag and drop javascript, drag and drop, drag and drop react js, drag and drop app builder, drag and drop html

Id: _nZCvxJOPwU

Length: 9min 54sec (594 seconds)

Published: Fri Sep 15 2023