Using Angular CDK Drag-Drop - Andrew Wiens

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

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.

Links:

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

Code on GitHub: https://github.com/adwiens/cdk-drag-drop-example

Angular Material CDK: https://material.angular.io/cdk/categories

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

CDK drag-drop demo source code: https://github.com/angular/material2/tree/master/src/demo-app/drag-drop

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

---------------

Oasis Digital: Your trusted partner for modern software development.

First-time quality, reliable expertise.

We work alongside your team to achieve reusability, create more functionality, and reduce time-to-market.

LINKEDIN:

https://www.linkedin.com/company/oasis-digital-solutions-inc-/

WEBSITE AND INQUIRIES:

https://oasisdigital.com/

OUR “TECH TALK SHOW” CHANNEL:

https://www.youtube.com/channel/UCC3ihTPwdU0PU9P7QGJa7bw

ADVANCED TRAINING:

https://oasisdigital.com/training