前言

项目有需要将NG-ZORRO的Modal对话框修改为可拖拽的并且可点击Modal外的元素。Antd（React版）的Modal组件已经支持了拖拽的功能。而NG-ZORRO好像并没有很好的支持。最后终于结合Angular Material提供的cdk-dragdrop实现了该功能。
版本：
Angular：10.2.0与8.2.3均能复现，10.2.0需多设置一个CSS
NG-ZORRO：同Angular版本即可

实现

源码Demo
Html代码：

  1.     <nz-modal nzNoAnimation [nzGetContainer]="container" nzMask="false" nzClassName="modal-dragdrop"
  2.     (nzAfterOpen)="setModelDragDrop('modal-dragdrop')" [(nzVisible)]="isVisibleDragDrop" nzTitle="可拖拽的Modal"
  3.     [nzZIndex]="1002" (nzOnCancel)="isVisibleDragDrop = false" [nzFooter]="null">
  4.     <ng-container *nzModalContent>
  5.       <p>正文内容</p>
  6.       <p>正文内容</p>
  7.       <p>正文内容</p>
  8.     </ng-container>
  9.   </nz-modal>
  1. nzNoAnimation：关闭动画，防止拖拽中抖动
  2. nzGetContainer：NG-ZORRO会将所有的Modal统一放在body下的一个div里，该属性能将对应Modal挂载到对应的元素下，目的是防止因拖拽需全局定义的部分样式影响到了其他非拖拽的Modal
  3. nzMask：取消该Modal的遮罩，因需点击遮罩下的元素，所以取消该遮罩
  4. nzClassName：本处className只为找到该dom元素，需唯一
  5. setModelDragDrop：具体看下文ts代码
  6. nzZIndex：NG-ZORRO-10.0.2新属性，10.0.2需配置该属性大于1000才能浮于默认的空遮罩上层

ts代码：主要是setModelDragDrop方法

  1.   setModelDragDrop(className: string) {
  2.     const modal = document.getElementsByClassName(className)[0];
  3.     const dragVideo = this.dragDrop.createDrag(modal as HTMLElement);
  4.     const header = modal.querySelector('.ant-modal-header');
  5.     dragVideo.withHandles([header as HTMLElement]);
  6.     dragVideo.withBoundaryElement(document.body);
  7.   }
  1. 获取到modal的dom
  2. 通过dragDrop的createDrag方法将元素设置为可拖拽
  3. 获取Modal头元素
  4. 将头元素设置为Modal可拖拽的处理句柄
  5. 设置边界

最后还有部分样式需要在全局定义：

  1. /* 模态框头部可移动样式，默认挂载到了.modal-container下的modal是需移动的modal，才设置头部游标可移动 */
  2. .modal-container .ant-modal-header {
  3.   cursor: move;
  4. }
  5. /* 默认的modal带有一个24px的padding-bottom，为了避免在固定区域（body）内移动达不到底边的情况，这里设置0 */
  6. .modal-container .ant-modal {
  7.   padding-bottom: 0;
  8. }
  10. .modal-container .ant-modal-wrap {
  11.     /* 通过设置该Css与设置对应Modal的[nzGetContainer]="ElementRef(.modal-container)"使modal能点击窗口外，用于可拖拽的modal */
  12.     pointer-events: none;
  13.       /*10.0.2新增*/
  14.     z-index: 1002;
  15. }
  17. .cdk-overlay-backdrop {
  18.       /*10.0.2新增*/
  19.     pointer-events: none;
  20. }

相关链接

dragdropcdk
NG-ZORRO