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

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]) 在特定元素上创建句柄。这个应该可以解决你的问题。

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

Draggable dialog with custom directive | Angular Material

drag-and-drop

draggable

angular-directive

angular-material

angular