Move Items between Columns with react-beautiful-dnd using onDragEnd
In this lesson we will place multiple task lists next to each other and enable movement of the tasks between the lists.
Now that our application has multiple columns, the onDragEnd callback will need to be refactored to handle more than one column. We will add some new logic to move tasks from one column to another in our state.
Instructor: [00:00] In this lesson, we are going to add further columns to our application and enable to movement of tasks between those columns. Firstly, I'm going to go back to our initial data.
[00:11] We currently only have one column. I've now added an additional two columns, at in progress column and at done column. I also need to add the IDs of those columns to our column order array.
[00:30] Our application is now rendering three columns. We need to update the styles, so that the columns are placed next to each other. We'll go back to our index. I'm going to create a component called container, which will wrap our columns in.
[00:58] This container will be a flex parent that will align the items next to each other. I have an important style components here. I'll just do that. Our columns are being printed next to each other. However, that to do column which has tasks in it is much wider than the other ones.
[01:18] Go back to column. I don't have container component here. I'm just going to add a width to these columns. Now, all of these columns have the same width. Let's going to zoom out a little bit, so that we can see what's going on.
[01:30] When we hover over in other column, they currently not highlighting. This is because, the taskless component in our in progress and done columns currently have no height. To fix this, we are going to convert our container to be a flex parent, and use the flex-direction of column.
[01:51] This is created a flexbox where the children are aligned vertically. For our task list, I'm going to say, "I want the flex to grow." Now, this flexbox will grow to fill the available space. Now, I want to hover over these columns, I get the correct coloring.
[02:14] While we're here, it's worth mentioning that I'd like to add a minimum height to my drop book components. I do this, so that if all the lists are empty, it's still possible to drop something on to those columns. If I didn't have this, there would be a droppable area, but it's height would be zero, so wouldn't be a very easy drop target for people to get.
[02:38] Coming back to our application, if we now drop in the in progress column, who knows at the items shifts back to original position. We need to update the reordering logic in our onDragEnd function to handle the movement between the columns.
[02:54] Going back to our index, previously we were using the source.droppable id property to look up the column from our system. We were able to do this with your only moving within one column. However, now the column that we start in can be different from the column that we finish in.
[03:14] We will rename this column to start, and we've created a new variable to store our reference to the column that we finish in. If the start column and the finish column are the same thing, then we can continue to use the same logic that we were using before.
[03:45] Now, if I reorder within this column, those reorder should be preserved. We now need to handle the case whether start and finish columns are different. We're going to use an approach that was very similar to what we had before.
[04:07] Here, I'm creating a new start task IDs array, which contains the same IDs as the old array. I'm then going to remove the dragged task id from this array. I'll then create a new start column, which contains the same properties as the old column, but without new start task IDs array.
[04:34] I'm also creating a new array for the finish task IDs which contains the same task IDs as the last finish column. I'm using the splice operator to insert the draggable id at the definition index. I'm again creating a new column. This time above the finish column with the new task IDs for that column.
[04:59] Finally, we're creating our new state object which has the same properties as a old state object, but we've updated the column's map to include the columns with the updated task IDs.
[05:11] The operations we implemented are very similar to the operations we needed to implement when reordering within a single column. The difference is, that we now apply the different components of this operation to the different columns rather than to the same column.
[05:29] If we do get our application now, we should see as possible for us to move tasks anywhere in our application. This is also true for keyboard. We can now use our keyboard to move tasks anywhere in our app.