Using CDK Drag and Drop to move items from one list to another

Have you ever used the Trello board app, or maybe other apps that also allow you to drag and drop list items from one list to another? Well, you can do this easily using the Angular CDK, and in this recipe, you'll learn about the Angular CDK Drag and Drop API to move items from one list to another. You'll also learn how to reorder the lists.

Getting ready

The project that we are going to work with resides in chapter09/start_here/using-cdk-drag-drop, inside the cloned repository. Proceed as follows:

1. Open the project in VS Code.
2. Open the terminal and run npm install to install the dependencies of the project.
3. Once done, run ng serve -o.

   This should open the app in a new browser tab, and it should look like this:

Figure 9.11 – The using-cdk-drag-drop app running on http://localhost:4200

Now that we have the app running locally, let's see the steps of...