Angular Material CDK’s drag-drop library enables dragging template elements anywhere in the window or between designated dropsites. Unlike the parent Material project, the Material CDK provides UI behavior without layouts or styles. This means that the CDK drag-drop feature can be used with any component library or existing styles in your Angular application. This video shows a sample Angular application that implements a custom drag-and-drop “remapping” interface using the CDK drag-drop library. In this example, draggable items can only be dropped into an available dropsite based on custom business logic. As we see, the drag-drop library provides more than enough inputs and events to make such custom functionality possible.

By Andrew Wiens, developer at Oasis Digital and instructor at Angular Boot Camp.

Live app on StackBlitz: https://stackblitz.com/edit/cdk-drag-…

Code on GitHub: https://github.com/adwiens/cdk-drag-d…

Angular Material CDK: https://material.angular.io/cdk/categ…

Drag-drop demo in the official example application: https://material-cb7ec.firebaseapp.co…

CDK drag-drop demo source code: https://github.com/angular/material2/…

A horizontal drag-drop demo: https://stackblitz.com/edit/angular-b…

Subscribe: https://www.youtube.com/c/Oasisdigitalstl/featured

#angular