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

Posted 2023-02-22

【中文标题】带有自定义指令的可拖动对话框 |角材料

【英文标题】：Draggable dialog with custom directive | Angular Material

【发布时间】：2021-08-18 17:44:11

【问题描述】：

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

<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部分拖动输入也可以拖动整个对话框）。

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

【参考方案1】：

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