How to Move Drag-and-Drop Cards Into Empty Columns
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass with a single-time purchase.
[00:00 - 00:11] Drag the card to an empty column. The problem of the current implementation is that if you drag all the cards from one of the columns and then try to drag it back, you won't be able to drop it.
[00:12 - 00:19] Because column can only be a hover target for other columns. So you can drag the columns, but cannot drag cards to an empty column.
[00:20 - 00:29] Let's fix that. Open SRC column TSX, update the use drop instead of the column string, pass an array with column and card.
[00:30 - 00:39] Scroll to the implementation of the use drop callback. Add the else block to the check of the type of the item, if drag the item type.
[00:40 - 00:52] Is not column, then we also check if dragged item column ID is not equal to the current ID. That means that we're not hovering the same column that we took this item from, then we return.
[00:53 - 01:07] We check if there are no tasks, we also return and finally we dispatch move task. We pass in the dragged item ID null and dragged item column ID and ID.
[01:08 - 01:21] Impert the move task action creator and also dispatch set dragged item where we want to update only the column ID field with the idea of the current column. Impert the asset dragged item action creator.
[01:22 - 01:33] Launch the app, yarn start and make sure that everything works. You should be able to drag the cards from one of the columns and then if you try to drag them back, then you should be able to do this.