7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 12Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Reordering Items

In this lesson, you'll how to insert elements into the document. This is different than appending—inserting lets you place elements anywhere you want.

3.5 Reordering Items

In this lesson, we are going to finish by implementing the ability to reorder the items in the list. So we will add a couple of buttons, one for moving an item up, one for moving an item down. And this is going to build upon some of the code that we wrote in the previous lesson because in order to restructure a document, we have to know the element that we are going to be working with and we need to know its siblings. So let's start by copying the Delete button and pasting it a couple of times so that we will have the moveU and the moveDown buttons. Now I'm going to make the moveUp and moveDown buttons the first buttons. The Delete is going to be over at the side because I don't want Delete to be prominent. And then we will just implement these functions. And we'll start with moveUp but we will also go ahead and stab out moveDown. That way we will have the function there ready to go. So let's go ahead and have that. And the first thing that we need to do in both of these cases, is get the active element. I mean, that's the first thing that we've done for the past couple of things that we've needed to do. So we've typed them, let's practice copying and pasting that, so there we go. Let's go ahead and add it to moveDown as well. So as far as moving up is concerned, let's assume that we have selected the second item in the list and we want to move it up. Well in order to move that element up, we need to reference its previous sibling. So we need to get that element and we kind of have that ability inside of the getSibling function that we wrote in the previous lesson. But this is a little more complex because it does a search for the previousSibling and it also does a search for the nextSibling. And we don't want that in this case. We just want to find the previousSibling. So, let's do this, let's write a function called getPrevSibling. This is going to accept the element that we want to work with, and we will take the first part of getSibling. We will copy it and paste it into the getPrevSibling. So we're still going to walk through the siblings, trying to find an LI element and if we find it, we return it. Otherwise, we will return null if we can't find an LI element as a previousSibling. And then this is going to allow us to use this getPrevSibling function inside of our getSibling. We, of course want to pass in the element. But we do need to check to see if we have a sibling after calling getPrevSibling so that we can return it. Otherwise, we will try to find the nextSibling. So we have essentially, the same functionality but it's a little bit cleaner, because we broke out the functionality for retrieving the previousSibling into its own function, so that we can use it inside of the moveUp function. So, let's call this previous, we will call getPrevSibling, and we will pass in the activated elements. So that's going to give us the previous element. However, we do need to check to see if we don't have one. Now because if we are at the top of the list and we click on Move Up, there's no place else to go. We won't have a previousSibling so we will just return, and that will be fine. However, if we do have a previousSibling, then we do want to reorder these things. So, the first thing we need to do is remove the activated element, so that we can then reinsert it before the previousSibling, and we do that with our previous object. We're going to get the parentNode, then we're going to call a method called insertBefore. We pass in the active element that we want to insert, and then we have to reference the element that we want to insertBefore. So we are inserting activated before the previous element. And if we look at this code, it should work. So if we activate the second item, we click Move Up that now move the second item before the first item. And we can do the same thing with first item, we can move that up. But let's add a third item and let's move it up all the way to the top. So we can reorder at least by moving an item up. Now we want to be able to go in the opposite direction, moving down. So this means that we essentially need to do the same thing by writing a getNextSibling function. So let's go ahead and do that. This will have element as its parameter name, and we will essentially do the same thing. We will take the second half of that code and copy it and paste it inside of getNextSibling. Now, we do need to declare sibling here, but it's still going to do the same thing. It's going to walk through the nextSibling. If it finds it, it returns it. Otherwise, it goes through all of the nextSibling until it doesn't find one and then it returns null. And now that we have this broken out into its own function, we can simplify the rest of get Sibling. So that's really all that we need to do is return the call of getNextSibling passing an element, and there we go. So we have the same functionality. This is much cleaner than it was before, and the specific functionality of getting the previousSibling or getting the nextSibling is inside of their own functions. So we can now use this getNextSibling inside of the moveDown function. So we'll create a variable called sibling. We will pass in the activated element to getNextSibling and that will get the next sibling. And then we can do the same thing. If we don't have a sibling, then we are at the end of the list. There's nothing to do, so we will simply return. But here, things are going to deviate from what we did inside of moveUp. Now we can go ahead and remove the activated element, but let's look at this visually because I think it's a little bit easier to see. So we're going to add a third item, and let's assume that we wanna move this first item so that it is in between second and the third. Okay, so we of course have the activated element, we have its nextSibling. So you might think that we could call the method called insertAfter, and unfortunately that's not the case. We don't have an insertAfter method, we have to use insertBefore. So that means that we of course have to get the nextSibling. But we have to get that siblings nextSibling so that we can insertBefore the third item, so it's not that big of a deal. It's just a few extra steps. So let's create a variable called nextSibling, and we will call the getNextSibling function. We will pass on the sibling because we want to get its nextSibling, but here's the thing, it might not exist either. The nextSibling might be the last item in the list. So once again, we need to check to see if we don't have a nextSibling, and if we don't, then we want to append the selected item to the end of the list. And to do that, we say sibling.parentNode and then the appendChild method. We pass in the activated element and that's going to add that to the end of the list, so there we go. But if we do have a nextSibling, then we will say nextSibling.parentNode.insertBefore, you'll pass in the activated element, and then the nextSibling. So that should work. So let's go and make sure it does work. So if we move the first item down, that should be placed at the end, now we did get an error. It cannot read property parentNode of null. That is on line 163. So let's see about 163 and yeah, that's a problem there, we need an else for the if. Okay, so let's try this again, if we move it down, that worked just great. Let's refresh. Let's add a third item, and if we move down, that still works. If we move down again, that worked. And of course, move up works because we made sure that it does. So, we now have a fully functional list. We can order the items however we need to. We can delete the items, we can also add items. And of course, we did all of this by using the DOM to manipulate the document.

Back to the top