带有自定义指令的可拖动对话框 |角材料

Question

我的应用程序中的每个对话框都或多或少像这样：

<custom-dialog-container>
    <custom-dialog-header>...</custom-dialog-header>
    <custom-dialog-content>
        ...
    </custom-dialog-content>
    <custom-button>
        ...
    </custom-button>
</custom-dialog-container>

我在每个对话框中都使用了custom-dialog-header 指令，我最近发现了通过该指令将可拖动效果应用于对话框的方法：

import { DragDrop } from '@angular/cdk/drag-drop';
import { Directive, ElementRef, HostBinding } from '@angular/core';

@Directive({
  selector: 'custom-dialog-header, [customDialogHeader]'
})
export class CustomDialogHeaderDirective {
  @HostBinding('class') class = 'dialog__header';

  constructor(
    element: ElementRef<HTMLElement>,
    dragDrop: DragDrop
  ){
    const availablePanes = document.getElementsByClassName('cdk-overlay-pane');
    const latestPane = availablePanes.item(availablePanes.length - 1);
    const dragRef = dragDrop.createDrag(element);
    dragRef.withRootElement(latestPane as HTMLElement);
  }
}

到目前为止一切顺利，因为一切都按预期工作。
唯一缺少的是处理区域限制为仅限<custom-dialog-header></custom-dialog-header>。
现在设置为整个对话框（即使从custom-dialog-content部分拖动输入也可以拖动整个对话框）。

所以这是我的问题 - 我应该如何实施？我已经阅读了很多关于这个主题的帖子和文档，但没有发现任何帮助。

Answer 1

您可以使用dragRef.withHandles([element]) 在特定元素上创建句柄。这个应该可以解决您的问题。