如何解决带有自定义指令的可拖动对话框 |角材质
我的应用程序中的每个对话框或多或少都像这样:
<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
部分拖动输入也可以拖动整个对话框)。
所以这是我的问题 - 我应该如何实现一个?我已经阅读了许多关于此主题的帖子和文档,但没有发现任何帮助。
解决方法
您可以使用 dragRef.withHandles([element])
在特定元素上创建句柄。这个应该可以解决您的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。