How to Move Drag-and-Drop Cards Into Empty Columns

You can find the working example for this lesson in the code/01-first-app/01.25-drag-the-card-to-an-empty-column.

Let's make it possible to move the cards to an empty column.

To implement this functionality, we'll use columns as a drop target for our cards as well.

This way if the column is empty and we drag and drop a card over it, the card will be moved to this empty column.

To do this we'll edit our Column.tsx drop hover code and add CARD to supported item types.

xxxxxxxxxx

accept: ["COLUMN", "CARD"],

Now inside of our hover callback, we'll need to check what the actual type of our dragged item is. The draggedItem has a DragItem type which is a union of ColumnDragItem and CardDragItem. Both ColumnDragItem and CardDragItem have a common field type that we can use to discriminate the DragItem.