Angular CDkDrag Demo - Stick cdkDrag only to allowed points

Screen.Recording.2025-05-19.152751.mp4

This project was generated using Angular CLI version 19.2.12.

Development server

To start a local development server, run:

ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

ng test

Running end-to-end tests

For end-to-end testing with Playwright, we have two test scripts:

Basic Drag Tests

To run the basic drag tests:

npm run test:e2e

Comprehensive Corner Tests

To run tests for all drag scenarios from all corners:

npm run test:corners

Note: Make sure the development server is running at http://localhost:4200 before executing these tests.

Test Coverage

The comprehensive corner tests verify drag behavior from all four corners (TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT) in all eight directions:

• RIGHT
• DOWN
• LEFT
• UP
• DOWN_RIGHT
• DOWN_LEFT
• UP_RIGHT
• UP_LEFT

This ensures the drag-snap component correctly predicts and snaps to the final position in all possible scenarios.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.