Using the CDK Drag and Drop API 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 using the Angular CDK Drag and Drop API to move items from one list to another. You’ll also learn how to reorder lists.

Getting ready

The app that we are going to work with resides in start/apps/chapter09/ng-cdk-drag-drop inside the cloned repository:

1. Open the code repository in your code editor.
2. Open the terminal, navigate to the code repository directory, and run the following command to serve the project:

   npm run serve ng-cdk-drag-drop to serve the project.
   

   This should open the app in a new browser tab, and you should see the following:

   

   Figure 9.12: The ng-cdk-drag-drop app running on http://localhost:4200

Now...