Angular 材质 CDK 拖放 对齐网格内部元素 cdkDragConstrainPosition @Input 用于拖放元素内的元素 position

Question

通过 Angular 材质 CDK 使用拖放时，它允许您通过[cdkDragConstrainPosition]="computedDragRenderPos"

例子：

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

但是，这会传入 pos，即鼠标 pos。 我知道你可以通过 dragRef 并获取元素的 getBoundingClientRect 来获取 x 但是一旦你将它传递到cdkDragConstrainPosition position 并更改元素的 position 它不再起作用。

你如何每 30px 移动一个内部元素......而不是元素开头的 position？

Answer 1

我有一个关闭的问题

dragRef 它是可拖动元素的引用，如果你想捕捉到某个网格，你需要计算 position 取决于其他元素

@ViewChild("someElement") someElement;

computeDragRenderPos(pos, dragRef) {
    return {
       x: this.someElement.nativeElement.getBoundingClientRect().x,
       y: this.someElement.nativeElement.getBoundingClientRect().y };
  }

您需要在此处包含一些 cursor 逻辑以使其正常工作

在我的情况下，由于某种原因（不确定这是个人问题还是全局问题），它也丢失了组件 class 的 scope （不确定这是个人问题还是全局问题）我在将 functionZ 传递给cdkDragConstrainPosition之前使用bind(this)解决它