JavaScript Drag & Drop Sortable List Project

[Music] hey what's going on guys so i'm still working on some stuff trying to finish up the freelance course and at the same time not overdo it so i'll be back on youtube within two or three weeks or so with new content and like i said until then i'll be releasing both guest videos and some projects from past courses so in this video we're going to build a vanilla javascript sortable list with drag and drop and this is from my 20 vanilla javascript project course on udemy and i'll have a link to that in the description if you're interested so in this project we'll be using methods like for each map sort we'll be using the spread operator we'll work with the document object model and we'll do a little bit of css as well alright so let's get into it okay so this is a sortable list project and my main focus on with this project is the drag and drop api which you can find here in the mozilla documentation and there's a whole bunch of drag events that we can use such as drag start which we'll be using drop drag enter drag leave so we'll be using a bunch of these in this project and the idea is to just have a sortable list that we can put into order and i chose to use just the 10 richest people i mean you could have a list of anything top 10 of anything and the idea is to just put it into the correct order and we're gonna make it so that on each page load you can see that it's in uh just a scrambled order okay so we're gonna scramble the list and then we can go ahead and take one and we can move it to another spot you'll see we have a little highlight when we're when we're hovered over a certain item and i can drop it there and it's going to switch spots with wherever i drop it so this button down here is to check the order now i know jeff bezos is number one so i'm going to go ahead and put him there and i know bill gates is number two so i'm going to put him there and then we can go ahead and check the order and whatever is correct is going to be highlighted in green whatever is wrong will be in red okay i know warren buffett is number three so we'll go ahead and move him there and check the order again and you can see that that's correct all right so like i said the main focus here is drag and drop but we're going to look at some other other uh helpful methods as well and a lot of dom manipulation and stuff like that okay so hopefully you enjoy this project and let's get started all right so we're gonna get started on our sortable list now this is gonna be a little bit different than than some of the other projects where we do where all the html is actually in the html file because here we're going to generate all of the list items through javascript so we're going to do the html first which is going to be really quick and then create a function to generate or output our list items into the dom that's the top 10 richest people or whatever you want to use if you want to use something else that's fine so let's start with the html which will be very simple so let's just put a title here of top 10 richest people and we want to include our style sheets which we're going to do i believe in the next video or the one after that and then we're also using font awesome here for some icons so i'm gonna head over to font awesome dot com and in order to use font awesome you need to just log in you can see i i have an account and i'm logged in and then if i go to start for free you can create a kit which i already have one so i'm going to say right here my traversing media kit and just copy this script tag and put that right in here okay and then down in the body we're going to have an h1 and we'll say 10 richest people we'll put a paragraph a little a little description so we'll say drag and drop drag and drop the items into the into their corresponding spots all right and then we're going to have a ul and we're going to give this a class of draggable list and an id of draggable list and the reason for that is the class is going to be used for styling the id is going to be used to grab onto in javascript for to manipulate the dom now we're not going to put anything in here that's going to be put in through the javascript okay so under the ul let's have a button and we're going to give this a class of check dash btn and an id of check okay and then in here let's say check order and i'm going to put an icon in here we're just going to use the paper plane icon so f a dash paper plane and then finally we need to add our script to the bottom so source is going to be script.js all right and that's it for the html so if we go ahead and look at this we can open this with live server we're not going to see any list items obviously but we we have the ul here we just need to insert it using javascript so let's jump into our script js and first thing we're going to do is just grab the dom elements that we need so let's say draggable list and we're going to set this to document.getelementbyid and we have an id of draggable list draggable dash list and then we also have the check which is the button so we want the id of check and we'll just call this check okay so that's all we need for now and then we're going to have an array of the richest people i mean you could use something else if you want something that's you know sortable and then i'm just gonna paste these names in here and these are in correct order so it's one through ten and then we need to create an array called list items that'll represent you know the list as we sort it as it's scrambled and so on this is going to be initialized as an empty array okay so this is where we're going to store the list items and then underneath that we need a way to keep track of the index of each list item so we're going to initialize here a variable called drag start index okay we're just going to initialize it with let because we're going to it'll change later on and then i'm going to call a function called create list which is going to be responsible for actually generating the list items okay we're going to create that function now so this is going to create list items or let's say insert list items into dom all right so let's say function create list and what i'm going to do here is we need to take this these values in this richest people array but we basically want to copy it or recreate it so that we don't scramble the original array because we need this order so what we can do is just use the spread operator which makes a copy of it and say richest people and then we want to loop through it so i'm going to add on to here a 4 each which is a high order array method that just loops through the array and inside here we're going to have some parentheses and we'll say for each person and we also want the index okay so we put in a function here with person which represents each item in the array which is a string of a person and then the index which is you know 0 1 2 and so on so within here let's create a value called list item and we're gonna what we're gonna do is create a new list item element to insert into the dom so we can do that by taking document dot and then there's a method called create item i'm sorry not create item create element because that's what we're doing we're creating an html element and it's going to be a list item okay now we want to add an attribute to this so i'm going to say list item meaning that li and then set attribute and we need to have some sort of index to keep track of each list item so i'm going to add a data dash index attribute when you create a custom attribute in html5 you want to use a data attribute so data dash and then this could be whatever i'm calling it index and we're going to set that to the actual index okay which will be 0 through 9 in this case so that'll set the index attribute and then we need the actual html so let's say list item dot inner html we're going to set that to a template string with backticks and we're going to have a span with a class of number okay because we want to display the actual number and we can do that by taking the index so this we're just using template string here with a variable syntax or expression syntax so we'll take the index which starts at zero we don't want to display zero we want one through 10 so we're just going to add 1 to that all right and then we'll have a div and let's give this a class of draggable and in order to make this actually draggable with html5 we need to add draggable equals true so that we can actually click on it and drag it okay and then inside that div we're going to have a paragraph and i'm just going to give this a class of person name because that's what's going to be displayed in here and then we want to display the value of the array which is person okay so we loop through richest people for each one each item we're calling it person and we're going to output it here and then under that let's have an icon so this will be fas and let's do f a dash grip dash lines so basically something to grab onto to drag okay and that should be it now we want to take the list items array which we initialized above and we want to push onto it the list item okay which is that li with all this stuff inside of it and then we need to add it to the dom so let's take our draggable list which is the ul and we're going to use the append child method which does just that it'll append the li into the ul okay so list item which is the li and that's it let's save that and let's take a look so now you can see that each list item is now being output we have the index plus one so we have one through ten we have the name which is the actual value and then we have this grip lines icon all right now before we get to styling this and making this look better in the next video i want to have it scrambled because right now it's just always the same order and the point of this is to have it scrambled so that you can take each one and drag it to the correct position all right so we'll do that in the next video okay so now we have an array of the richest people the top 10 richest people we're inserting it into the dom as list items now i want to scramble these so that when we come to the page they're not in the correct order and there's a few ways we can do this what we're going to do is add on to right here where we called for each we're going to add some other high order array methods first thing i'm going to do is map so i'm going to go right here above for each and do a map and what map does is it will take the array and allow us to return a new array of whatever we want and we need we need a way to we need something to sort by and we want it to be a random number that we sort by so that it can get scrambled so what i'm going to do here is say for each one i'm going to just call a we want to return an array of objects and these objects are going to have the value which of course is a and then also a sort value which is going to be we're going to say math.random which will just create a random decimal all right now to show you what this gives us in the for each i'm just going to do a console log of person because that's ultimately what is getting manipulated here okay and you can you can chain these high order array methods as many as you want and manipulate the array so let's save that let's go back and open up our console and over here you're just going to see object because we've what we've done is is transformed into an array of objects that has a value a value value and a sort value okay and the value is the obviously the name and then sort is going to be just a random decimal that comes from that math.random and if i reload each one of these sorts it's going to be a different value different number okay now what we want to do is take this and actually sort the array by this value right here this sort so we can do that using the sort high order array method which i just want to show you real quick quick javascript sort if we look at the docs so basically it sorts and out sorts the elements of an array in place and returns a sorted array the default sort order is going to be ascending and it's built upon converting the elements into strings okay and then it compares their sequences now if we do this without adding a special function i just want to show you real quick where should i do this i guess i'll just do it right here so let's say we have an array of numbers and i'm going to delete this after i just want to give you an example if i do like 1 let's say 1 3 1 10. 40 um 302 and then i go down here and i do a console log of numbers dot sort okay just numbers.sort and we take a look at that in our console let's go let's see it's going to be down here and if you look at it it's not sorted numerically right we get 1 110 3 302 40. and the reason for that is because like it said in the docs it can it's these are strings it converts it to a string and then sorts it so 110 would be after one if these are strings now what we can do is change how it's sorted by using a compare function so right here compare function specifies a function that defines the sort order and we can have two parameters a first element for comparison and a second element for comparison so what we want to do and what we could do here in this example is have a function and pass in the two options for comparison and then we could return from that a let's say a minus b so the first one minus the second one and then if we look in our console now we have like a numeric sort 1 3 40 110 1302 so that's essentially what we want to do with these with these random decimals so let's get rid of this this is just for example and then just like i showed you up above we're going to add sort and we're going to use that compare function we'll use an arrow though so we'll say a and b and we just want to return from this a dot sort and we want to do minus b dot sort okay which is this which is this value here so now let's save that and let's go back now we're still just going to see object over here because we're still returning an array of objects however you can see the order that work that we're logging the order is different now we have carlos bill gates so if we reload now it's in a different order now it's in a different order so the array is now being sorted by this random value so the last part of this is to map it back into just an array of strings of this right here these values and that's very simple all we have to do is add another map after the sort and say for each one we just want to return the value okay because remember we have an object that has a property of value okay with whatever that string is whatever the name is and now now we're just mapping it back to that so let's save that and go back and now you can see we're logging each string it's also back in the dom and it's random okay so we'll reload and there we go so each time we reload it scrambles the array so hopefully that makes sense and we'll go ahead and just get rid of that console log we don't need that anymore all right so we've transformed this uh ordered array so basically we copied it and then we went ahead and changed it into an object with a value and a sort we did the sort by the random value and then we turned it back into an array of strings but this time it's going to be scrambled and then we loop through and do the same thing we were doing before okay so hopefully that makes sense in the next video we're going to take this and style it and make it look a little better all right so now we're going to do the css because this doesn't look very good i want to move everything to the middle and style these list items and so on so first thing we're going to do is grab a font from google fonts.google.com we're going to grab the lato font so down here we'll go ahead and choose the import okay we'll grab that and just at least while we do the css let's just make this smaller so that we can see both at the same time so let's paste that in we'll import that font and just like i do with just about everything we're going to add a box sizing property of border box on everything and then the body itself is going to be pretty this is going to be pretty repetitive throughout our projects just because we're just centering everything so let's set a background i'll do a background color explicitly to white and i'm going to display flex because i want to center everything but i want it to be a column so flex direction column and we're going to align items to the center go ahead and save that you'll see that everything gets pushed to the center i want to make sure it's justified to the top so we're going to use flex start for justify content and then just set the height of the body to 100 viewport heights remove the margin and we're going to add the font family which is the later font okay so that should do it for the the body now we're going to move on to the draggable list which is the ul that surrounds all of this so a class of draggable dash list and we're going to set a border around everything so let's say 1 pixel solid and we're actually going to use this color quite a bit so let's let's actually create a variable for it so we'll just say on the root scope here let's set a variable so we want to do dash dash we'll call this border color and that's going to be e 3 e5 e4 okay and while we're at it let's just add we're going to have a background color and these are just all um gray colors you can you can make it more stylish if you want but i'm just going to stick to plain gray so let's do c 3 c 7 c a okay so now we can use these variables where needed so right here we're going to use our border color so we'll say var and we want our border color and then let's see the color of the text let's do three what is it three four four four four f okay actually we can probably put that in a variable as well you don't have to it's completely up to you and i guess we'll call this uh text color and then let's change that to our variable text color okay so we have our color let's add our padding or i should say take away any padding so set that to zero and then for the um for the list style type we're going to set that to none because we want to take the bullets away so let's save that there we go so that still doesn't look very good but now we're going to style the list items and the content within the list items here so let's see we'll do uh draggable list li and let's set background color to white and let's set a display flex and set a flex value of one all right and then what i want to do next is add a border after each of these list items so except for the last one there's no sense in having a border on the last one so what we'll do is we'll set the draggable list list item and we'll use the not pseudo selector and then in here we're going to use the pseudo selector of last last of type so basically what this is saying is all the list items except the last one and we're going to set a border bottom one pixel solid and let's use our variable of border color and save and there we go so now we have a border on a bottom border on all of them except for the last one so let's style the number basically i want the number to be like in a big square on the left so that has a class of number so let's take our draggable list and then the span with the class of number and let's add a background color which is going to be i believe yeah it's going to be our variable of background color which is the darker gray and then we're going to set this to display flex because we want the number to be in the middle of the box so we'll align items to the center and we will justify content to the center as well i'm going to increase the font size of the number to 28 pixels and then make the whole area have a height of 60 pixels and a width of 60 pixels so just a square box okay and then to take care of this spacing right here i'm going to just change the margin of the the name remember each of these paragraph with the name has a class of person name so let's say draggable list and then uh person name and we're gonna set margin to zero top 20 and then zero zero all right now in here we have a class of draggable if we look at our javascript where these are getting generated div with the class of draggable surrounds the person name and the icon so i want to start to work with that so let's say draggable okay and we want the cursor to be a pointer so that the user knows that they can actually click and drag we're going to set display flex and let's go ahead and align items center and then we're going to justify the content to space between so that any remaining space between flex items goes in between the elements and then just set the padding to 15 so we bring it away from the sides and set flex to one and there we go so that looks pretty good you can see you have a cursor so that hints that the user can actually click and drag it so let's see what's next when when we click the check order button which we will style this in a minute what it's going to do is is see if the or see which you know which item is in the correct order if it's in the correct order it's going to be highlighted green if not it's going to be highlighted red so we're actually going to have on the list item i'm just going to grab this so draggable list li and then on the li we'll have a class of either right or wrong and then we want to change the color of the person name depending on that so let's change this to color and if it's right then it's going to be green so we're going to have a color of hexadecimal 3 ae 374 which is like a very bright green and then let's actually just we'll just copy this and then we'll change this right class to wrong and let's change the color to a red which we're going to do ff 3838 all right now to test this out remember these the li is being created within javascript right here let's create element so just to test out the class we could just take our list item and we could say class list and we could do add and we could add a class of write and this will add it to all of them you can see now they're green if we add a class of wrong then they're all red now we're not going to keep this here because i mean it doesn't make sense but we will be we be adding this later when we actually have the event to check the order okay so i just wanted to just quickly show you how uh how that looks all right so we'll just take that line out and then the last thing i want to do in terms of this is when i'm dragging over like if i'm going over jeff bezos i want jeff bezos's the inner list item to be a little darker okay change color a little bit so that'll have a class of over so let's add that we'll go right here and say draggable list and on the li will be a class of over and then on draggable is where we want to add that is where we want to basically add the color so let's say background color and we're going to set that to ea three times all right and just to show you i mean we could add the class of over just to show you that it changes that color okay so i think yeah that's it as far as the list items now we just want to do the button real quick so let's go down to the bottom here and it has a class of check btn and we're going to set the background color to the variable of background color i should say the custom property that's what it's technically called and then let's see uh why is that oh i get a quote in there okay so background and then let's set the border to none let's set the color of the text to our variable of text color and then let's set the font size to 16 pixels and then just add some padding so 10 pixels top and bottom 20 left and right and let's also add a cursor pointer here as well all right and then i'm just going to give it a little effect when it's active so let's say check button and then colon active so when we click it i want it to just scale down a little bit so we're going to use the transform property and then scale and 1 is the default so we're going to just do 0.98 so that way when i click it it just you can see it scales down a little now notice that border right there i want to get rid of that so we're going to add check button focus and set the outline to none okay so now that border's gone so that's the css so in the next video we're going to start to work on the drag events because when i click and i hold this and i start to drag we can fire off an event when i drop it somewhere we can fire off an event we basically want to be able to just bring it to where we want okay and then we want to proceed to be able to check the order and match it against the original array so we'll get into that next all right so now we're going to get into drag and drop okay we want to be able to grab one of these bring it down to where we want let go and then it'll get put in that spot and then ultimately we want to be able to check the order but let's handle the drag drop events there's actually quite a few and if we look at the documentation here the mdn web docs um you'll see that there's a ton of different drag events so we're going to be using let's see drag start so the user starts dragging an item so we want to put that on the draggable class which is you know what we're grabbing right here so we want drag start we want drag enter and drag leave so basically when we enter and leave an element also uh what else we want drag over because we want to have whatever whichever one we're dragging over we want to add a background color we want it to be a darker gray and then of course drop which this this has always confused me i always put drag drop as the event but it's just drop and that is an item is dropped onto a valid drop target okay so those are the events we need to use now this create list that we have here runs automatically and you know it sorts everything and it puts them into the list items so right at the end while within the create list function i'm going to call an add event listeners function and we're going to create that down here add event listeners and that's where we're going to do just that at our event listeners and there's two dom elements we need one is the draggable class so let's say const and we'll call this draggables and it's going to be document dot query selector all because there's more than one class of draggable and then we also want the draggable list list items so this is going to be let's call this drag list item or items and then we want to add our event listeners so i'm just going to loop through draggables so for each draggable and we just want one event listener on each one so let's say draggable dot add event listener and this is where we want to listen for drag start and when that happens we're going to call a function called drag start okay and make sure you have an uppercase s here camel case and then let's see on the i'm just going to copy that on the drag list items so this will be drag list items we're going to loop through let's call this item and then on item we're going to have we're going to have actually a couple different events here so the first one is going to be drag over which is going to call a function called drag over and then we're going to have a few more let's do 2 3 4. so this one here is going to be drag drop and that's going to be called on the drag i'm sorry i already almost did it again so this is going to be just drop that's the event and then this event is going to be drag enter and that will call drag enter and then drag leave drag leave okay so what should happen now is these list these events should get fired off when we these functions should get fired off when we hit these events so when i start to grab this and drag it should fire off this function now we haven't created these functions yet so let's do that now so let's say function drag start and i think for now what i'm just i'm just going to do a console log just so you can see what which event is actually firing off so this is the drag start and let's see we'll just grab this we have what five of these so we have drag start and then we have drag enter so that will call drag enter and then we have drag leave okay and we have drag over and we have drag drop but the the event itself is just called drop all right so let's save that and now these should fire off so let's open up our console and i mean i know there's not a lot of room here but i'm just going to click on this and move it slightly and you'll see we get drag start and drag enter because i've entered into this one when we leave it we get drag leave and you'll see the drag over just keeps going because i'm still just hovering over it okay if i let go then the drag over stops and the drag leave runs so the reason i did the console log is just so you can see when these fire off okay so we basically have drag start and then enter leave enter leave and drag over just is continuously running as i'm over the element okay now this might get confusing if i leave these console logs in so what i'm going to do is just i'll leave them but i'm gonna comment these out and you can pre you know check it out yourself do it yourself so you can see exactly when they're fired off okay so now let's figure out what we need to do here we have our events getting called our functions getting called that are linked to our events but we want to be able to grab one and let go and and replace it we want some other things to go on as well like when i hover over you know michael bloomberg or whatever we want that that color to change um that's probably the easiest so let's do that first so basically on let's see that's not actually that's not going to be on drag over that's going to be on enter yeah so when we enter we want to add the class of over remember we have that css class of over and when we leave we want to remove the class of over so on drag enter let's just simply say we can actually use this keyword which pertains to the element class list add and we're going to add the class of over which will give it a slightly darker background all right and then i'll just copy that and go into drag leave and we're instead of whoops instead of add we're going to use classlist.remove all right so that should be pretty simple let's grab this and there we go so when we when we're entering it adds the class of over to the current element we use the word the keyword this which pertains to the actual element the list item and then when we leave it removes it and then it adds it to the next one so we get that effect all right so that's pretty easy now to be able to actually move one of these to another position we're going to deal with this right here this drag start index that we initialized up here at the top so we're going to go into drag start and we're going to take the drag start index and we're going to set it to this dot and there's a method called closest so we want the closest and it does just that it will look at the dom and we want the closest li and then we're going to get the attribute of the data index because that's how we tell which item is in which position so data index okay and let's make this a number with the plus symbol here so we have the drag start index and we can actually take a look at that if you want drag start index and open up our console let's grab this one right here and as i do the drag star you'll see that this has a drag start index of two i grab this one has an index of zero now since we have that set let's go down to let's see drag drop and from here now we want to create a drag end index okay so we're going to say const drag yeah drag end index and we're going to set that to this dot get attribute and we want the data index data index so basically we're getting the start index and the end index and let's put a plus sign here as well so that that's a number okay uh whoops and then what we want to do with that is we want to swap them right we want to swap the the one we click and drag with the one we drop it into so let's have we'll have a function called swap items and that's going to take in the drag start index and the drag end index right and of course we want to remove the over class so we'll just say this dot class list dot uh remove over just so the the dark background doesn't stay and then let's create our swap items okay so function swap items and basically that's going to take in a two it's going to take in actually the first one is the from index which is the one we click and drag and then the two index which is where we drop it all right and let's just do a cons oops console.log here and i just want to show you something real quick so i'm just going to do one two three and if i go and i drag this and i drop nothing happens and the reason for that is basically the drag over event is getting in the way so we what the re the only reason i have drag over here is to prevent the default action okay so what we need to do is just pass in an event parameter and simply call e dot prevent default okay so any event it'll just prevent the default behavior now if i go and i drop now you can see we get the one two three all right so let's get rid of this console log here and we actually want to swap the items so we're gonna say let's say const we'll say item one and we're gonna set item one to list items and it's we're gonna have the from index which is being passed in as a parameter and then query selector not query selector all but just query selector and then the class of draggable okay so we're grabbing that first one and then let's copy this down and this is going to all be the same we just need to change the index this one is going to be the 2 index and this is going to be item 2. okay so these will essentially give us the dom elements i can actually do a console log of item one and item two and now if i go over here and i grab the first one and i drop it here you can see the first one which is larry ellison we get the whole dom element and then the second one was bill gates that's where i dropped it so we're just right now we're just getting them um now we just we need to swap them in the dom so let's get rid of this console log and we can swap the items by taking list items and take our from index and we're going to use append child which will actually do just that it'll append a pen to child element and we're going to append item one okay and then we're going to take the two index okay and then we're gonna append item two so what this should do is swap the two so now if i take bernard arnault and i go down to let's go to bill gates and i drop no it's not working i'm sorry i did this wrong from index should be item two yeah because from index is the first one and then two would be item one all right let's try that again so grab larry page and go to bill gates and let go and now larry page is here and bill gates is up here okay so this function takes care of actually being able to swap the items on drop okay we call that right here which gets called on drop and we also remove the over class because otherwise that gray outline or gray background would stay there all right cool so now we're able to actually move our items around yep so we can move them wherever we want now the next thing we want to do in the next video is to be able to check the order because the goal here is for us to get these in the correct order of the richest people in the world the top 10 richest people and of course if you don't want to use richest people you can change all you have to do really is change this to whatever you want just have it in the correct order here well yeah hopefully that makes sense it shows you all the different drag events that you can use and of course you can create other projects based off this and um you know that use drag and drop all right so like i said in the next video we'll go ahead and do this uh check order functionality all right so the last thing we want to do is to be able to check the order to see if it's correct and then basically if it's in the correct spot then it'll be green if it's not it'll be red so we have the check item right here or the check element which is the button and we just want to add an event listener to that so when we click it it fires off an event so i'm going to put that at the very bottom here let's say check dot add event listener and we're going to listen for a click and when that happens we're going to call a function called check order okay i'm just going to put that right above at event listeners so let's say function check order and let's just put we'll put a comment for swap items so we'll say swap list items that are um drag and drop and then for check order let's say check the order of list items on button click actually we don't need to say on button click because that's i mean that's not part of the function so for check order we're going to take our list items okay and just to refresh list items are right here so it starts off as an empty array and when we create our list we go through and we basically just add all the html and stuff like that add the data index and then we append it to the dom but um yeah so we're going to take list items and loop through so let's say for each list item and we want the index as well so let's put another set of parentheses since we we want two two uh parameters here so one is list item and then one is index because with for each and map and all that we can get the index as well so let's create an arrow function here and then we want to get the person name so let's say const person name and we're going to set that to our list actually i'm sorry list item so basically the single item that we're looping through on each iteration and then we want to use query selector and we want to draw whatever is in draggable okay so draggable and then we want the inner text and we're also going to just trim it so any excess white space or anything so we have the person name all right and then we're just going to check to see if the person name is not equal to richest oops which is people which is our original array and then pass in the index okay so if that's not true then it's in the wrong spot all right because we're getting the index of the list item and we're matching it to the index of this array right here which is the correct order okay so if that is not true then we want that particular item to be read so we're going to add a class to it we're going to say list item dot class list dot add and we're going to add the wrong class which will make it red else then we're going to take list item and oops class list and we want to remove wrong okay if it has the class of wrong we're going to remove that and we're going to add the class of write so we want to add right okay so we'll save that and that should do it so what i'm going to do is check out the original list right here and let's make some of them write some of them wrong so jeff bezos we're going to move him to the top let's see bill gates is second and let's put let's see larry page is last so put him last and then a bunch of the other should be wrong so let's fire this off click the button and there we go so you can see the ones that i put in the correct position are correct if i move larry page up and i click check order again that's wrong okay if i move let's see warren buffett is third check order now those are right and i mean you could do this with anything it's just a it's just a basically a little sorting game okay it doesn't have to be richest people that's just what came to mind for some reason but you could put anything anything you want and of course you could style it better if you want to get more into css but hopefully this project taught you a little bit about drag and drop that that was the main purpose of this project to show you those events but uh yeah so that should be it so hopefully you enjoyed this one and i'll see you in the next one

Channel: Traversy Media

Views: 42,784

Rating: 4.9728017 out of 5

Keywords: javascript, javascript DOM, vanilla javascript, spread operator, drag and drop, js drag and drop

Id: wv7pvH1O5Ho

Length: 51min 43sec (3103 seconds)

Published: Mon Sep 06 2021