Now comes the really fun part. Let's make it where we can actually drag the columns to reorder them. The first thing we need to do to accomplish this is import the draggable component from the view draggable dependency that we installed in an earlier lesson. Now down in the template, let's use our draggable component to display each of the columns.
I'll come just inside our wrapper div here and let's use the draggable component. Now this component takes the array that we want to display items for as its vModel. For us, that's going to be the columns. Using vModel here makes it so that each column will be displayed by vDragable, but also anytime we move a column within vDragable, the array will be updated as well.
So that's what makes our order change in the data. Now we also need to provide a group prop here. And I'll give this the static value of columns. This group prop allows us to drag and drop items between different lists.
Now it's not strictly necessary for us since technically our columns are really only one list. But you'll see how this really comes into play when we work with the tasks a little bit later. For now, I just like to name the group columns to kind of keep everything together and label this nicely. The next prop we need to provide is called ItemKey.
This is how we inform ViewDragable of how to identify each of the items within our list. For us, that's going to be with the ID property of each of the columns. I'm sure under the hood, ViewDragable is probably just using this to provide the key for a v4 loop and maybe some other things. Lastly, this Dragable is going to become the component that wraps our actual columns.
Therefore we need to take the class list here that is on our wrapper div and move it to the draggable component instead Inside of draggable we can now target the slot for each individual item So now we're working with each of the individual columns Okay, so that means we're no longer going to need the v4 So down here I can get rid of the v4 and the key and then move everything that makes up our column, that is everything inside this div here, into the item slot. Great. Now column is no longer defined. We can access that individual item on a variable exposed to the slot called element.
And I'll just rename it column here so that it works with our column variable down here. Great. Now those red squiggly lines disappear. But we also need to inform ViewDragable here of this column type.
So I'll put a colon here and say the element is of the type of column. And this is that column interface defined in the types file. Excellent. Everything else should be good to go.
Now over in the browser, everything looks the same as it did before. But now I can drag my columns around to reorder them. And I can do this to any of the columns in the list. Sweet.
And that's how easy it is to work with drag and drop with view draggable. Let me also print out the column's data just below our board so you can see what's actually happening to the data when we drag and drop a column. Here we can see the full array printed out below the board. And it looks like I've also made a mistake with how the background color is working.
but maybe we can deal with that in a little later lesson. However, the important part here is that you see complete is at the bottom, and then QA, then in progress, then selected for dev, and at the top is backlog. But when I switch backlog with selected for dev, now selected for dev is at the top of our array, and backlog becomes the second item in our array. So view draggable is making the drag action in the UI actually makes sense for how the data is manipulated.
Let's remove that printout now as it's not needed any longer. Now comes the really fun part. Let's make it where we can actually drag the columns to reorder them. The first thing we need to do to accomplish this is import the draggable component from the view draggable dependency that we installed in an earlier lesson.
Now down in the template, let's use our draggable component to display each of the columns. I'll come just inside our wrapper div here and let's use the draggable component. Now this component takes the array that we want to display items for as its vModel. For us, that's going to be the columns.
Using vModel here makes it so that each column will be displayed by vDragable, but also anytime we move a column within vDragable, the array will be updated as well. So that's what makes our order change in the data. Now we also need to provide a group prop here. And I'll give this the static value of columns.
This group prop allows us to drag and drop items between different lists. Now it's not strictly necessary for us since technically our columns are really only one list. But you'll see how this really comes into play when we work with the tasks a little bit later. For now, I just like to name the group columns to kind of keep everything together and label this nicely.
The next prop we need to provide is called ItemKey. This is how we inform ViewDragable of how to identify each of the items within our list. For us, that's going to be with the ID property of each of the columns. I'm sure under the hood, ViewDragable is probably just using this to provide the key for a v4 loop and maybe some other things.
Lastly, this Dragable is going to become the component that wraps our actual columns. Therefore we need to take the class list here that is on our wrapper div and move it to the draggable component instead Inside of draggable we can now target the slot for each individual item So now we're working with each of the individual columns Okay, so that means we're no longer going to need the v4 So down here I can get rid of the v4 and the key and then move everything that makes up our column, that is everything inside this div here, into the item slot. Great. Now column is no longer defined.
We can access that individual item on a variable exposed to the slot called element. And I'll just rename it column here so that it works with our column variable down here. Great. Now those red squiggly lines disappear.
But we also need to inform ViewDragable here of this column type. So I'll put a colon here and say the element is of the type of column. And this is that column interface defined in the types file. Excellent.
Everything else should be good to go. Now over in the browser, everything looks the same as it did before. But now I can drag my columns around to reorder them. And I can do this to any of the columns in the list.
Sweet. And that's how easy it is to work with drag and drop with view draggable. Let me also print out the column's data just below our board so you can see what's actually happening to the data when we drag and drop a column. Here we can see the full array printed out below the board.
And it looks like I've also made a mistake with how the background color is working. but maybe we can deal with that in a little later lesson. However, the important part here is that you see complete is at the bottom, and then QA, then in progress, then selected for dev, and at the top is backlog. But when I switch backlog with selected for dev, now selected for dev is at the top of our array, and backlog becomes the second item in our array.
So view draggable is making the drag action in the UI actually makes sense for how the data is manipulated. Let's remove that printout now as it's not needed any longer.