4

I am trying to use Angular's CDK Drag & Drop feature and its working great, however I can't find documentation on how to snap to a grid.

I found a GitHub issue that states that this feature has been added.

https://github.com/angular/components/issues/15471

This is what I would like to achieve with the CDK's Drag & Drop.

https://xieziyu.github.io/angular2-draggable/#/advance/snap-grid

LudacrisX1
  • 330
  • 1
  • 5
  • 12

1 Answers1

4

You can use the cdkDragConstrainPosition input on your cdkDrag element

Example:

<div cdkDrag [cdkDragConstrainPosition]="computeDragRenderPos">
  ...
</div>

export class MyDraggableComponent {

  constructor() {}

  computeDragRenderPos(pos, dragRef) {
    return {x: Math.floor(pos.x / 30) * 30, y: pos.y}; // will render the element every 30 pixels horizontally
  }
}

https://material.angular.io/cdk/drag-drop/api#CdkDrag
https://material.angular.io/cdk/drag-drop/api#DragRef

TheWildHealer
  • 1,546
  • 1
  • 15
  • 26