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)解決它