ng-zorro modal 标题行拖动

官方文档：https://ng.ant.design/version/11.4.x/components/modal/zh

 

ng-zorro 中，modal 对话框是不可拖动的，这里记录个指令实现其可拖动效果。

主要使用在标题行，使用 nzTitle 关联 template，然后调用指令：

<nz-modal [(nzVisible)]="draggableModalVisibility" [nzMask]="false" [nzWidth]="300"
          [nzTitle]="draggableModalHeader" (nzOnOk)="onDraggableModalCancel()"
          (nzOnCancel)="onDraggableModalCancel()">
  <ng-container *nzModalContent>
    <p>Content one</p>
    <p>Content two</p>
    <p>Content three</p>
  </ng-container>
</nz-modal>
<ng-template #draggableModalHeader>
  <div DraggableModal>可拖拽 modal</div>
</ng-template>

 

指令内容：

 

 

原理就是根据绑定指令元素向上找父级，监听鼠标按下抬起，设置相关位置信息