Angular CDK 拖放 - 对齐网格

【问题标题】：Angular CDK Drag & Drop - Snap to GridAngular CDK 拖放 - 对齐网格
【发布时间】：2021-05-13 20:25:16
【问题描述】：

我正在尝试使用 Angular 的 CDK 拖放功能，并且效果很好，但是我找不到有关如何捕捉到网格的文档。

我发现了一个 GitHub 问题，指出已添加此功能。

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

这就是我想通过 CDK 的拖放实现的目标。

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

【问题讨论】：

嗨，你找到什么了吗？

标签： angular angular-cdk angular-cdk-drag-drop

【解决方案1】：

您可以在 cdkDrag 元素上使用 cdkDragConstrainPosition 输入

例子：

<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

【讨论】：