Drag and Drop

Make Any List Draggable in Minutes

October 09, 2025

Drag-to-reorder functionality improves UX by letting users customize list order, but implementing it requires handling drag events, calculating drop positions, and managing list state. The Angular CDK Drag and Drop module simplifies this with directives that handle all drag complexity, including visual feedback, drop zones, and reordering logic. This tutorial demonstrates how to add drag-to-reorder functionality to any Angular list using the CDK Drag and Drop module, requiring minimal code and no external libraries.

Angular Angular CDK Angular Components

How to Build a Resizable Sidebar in Angular (Step-by-Step)

April 17, 2025

Resizable sidebars improve UX by letting users customize layouts, but implementing drag-to-resize functionality requires handling mouse events, calculating dimensions, and managing state. The Angular CDK Drag and Drop module simplifies this by providing built-in drag handling, boundary detection, and state management. This tutorial demonstrates how to build a resizable sidebar using only the Angular CDK, creating a professional drag-to-resize experience without external libraries.