A hands-on exploration of the drag and drop API introduced in Angular Material CDK (v7 release candidate). Covers the basics of making elements draggable with cdkDrag, creating drop zones with cdkDrop, reordering items in a list using moveItemInArray, and transferring items between lists with transferArrayItem. Also covers extras like entered/exited output events, drag animations, drag previews with cdkDragPreview, and conditional drop logic using enterPredicate. Culminates in building a simple Kanban-style task board with connected lists.
Table of contents
A simple exampleCreating a drop zoneRe-ordering items inside a listDragging from one list to another listExtra'sExtra 4: Allowing an item to be dropped in the drop zoneTime to wrap it up3 Impressions