javascript - 在居中元素上使用 Angular CDK DragDropModule

Question

我正在尝试DragDropModule在居中组件上使用 Angular CDK。这工作正常，但是在拖动操作开始时，居中的组件移动到右上角，因为我用来使组件居中的转换被 CDK 拖动转换覆盖。

居中的组件显示在全屏覆盖的顶部，因此我不能使用 flexbox 布局（至少据我所知）。在现实生活中，居中的组件是一个模态对话框......

这是我的 MVCE 组件：

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-centered-panel",
  styles: [
    `
      div.centered {
        background-color: red;
        width: 200px;
        height: 200px;
      }
    `,
    `
      .overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        background-color: rgba(0, 0, 0, 0.5);
      }
    `,
    `
      .centered {
        position: absolute;
        left: 50%;
        bottom: 50%;
        transform: translateX(-50%) translateY(50%);
      }
    `
  ],
  template: `
    <div class="overlay"></div>
    <div class="centered" cdkDrag></div>
  `
})
export class CenteredPanelComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

有没有办法让阻力知道当前的转变？或者有没有更好的方法将页面上的可拖动 div 与叠加层一起居中？

这个 stackblitz 展示了问题的实际效果：

https://stackblitz.com/edit/angular-ivy-7ynh38

标签： javascriptangulardrag-and-dropangular-cdk