Angular CDK拖放 - 对齐网格

Question

我正在尝试使用Angular的CDK拖放功能，它运作得很好，但是我找不到关于如何吸附到网格的文档。

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

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

这是我希望通过CDK的拖放功能实现的目标。

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

- LudacrisX1

---

嗨，你找到什么了吗？ - LETOURNEUR Léo

Answer 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
  }
}

CdkDrag 和 DragRef 是与拖放相关的 Angular CDK（组件开发工具包） 类。

- TheWildHealer