Angular 如何实现拖拽popup

一、在 Angular 中实现可拖拽改变弹窗大小和位置的方法有以下三种

1. 使用原生 JavaScript 事件和样式操作：通过绑定鼠标事件（如 mousedown、mousemove 和 mouseup）来实现拖拽功能，并通过修改元素的样式来改变其位置和大小。
2. 使用第三方库：可以使用一些成熟的 JavaScript 拖拽库，例如 interact.js、ng-draggable 等。这些库提供了方便的 API 和指令，可直接在 Angular 项目中使用。
3. 使用 Angular CDK（Component Dev Kit）提供的拖拽功能：Angular CDK 提供了一组组件和指令，用于构建可重用的交互式组件。其中包含了拖拽的功能，可以用于实现拖拽改变弹窗大小和位置。你可以参考 Angular CDK 的官方文档来了解如何使用它提供的拖拽功能。

二、这篇文章主要介绍第三种方法的实现

        要通过 Angular CDK 实现拖拽改变弹窗大小和位置的功能，可以按照以下步骤进行操作：

        1. 安装 Angular CDK：打开终端，进入 Angular 项目根目录，并执行以下命令来安装 Angular CDK：

npm install @angular/cdk

        2. 导入所需的模块：打开需要使用拖拽功能的组件文件，导入 Angular CDK 中的 DragDropModule 模块：

import { DragDropModule } from '@angular/cdk/drag-drop';

        3. 在模块中引入 DragDropModule：在组件所属的模块中，将 DragDropModule 添加到 imports 数组中：

@NgModule({
  imports: [
    // 其他模块
    DragDropModule
  ],
  declarations: [YourComponent]
})
export class YourModule { }

        4. 在 HTML 文件中添加元素：在组件的 HTML 文件中，添加要实现拖拽功能的元素，并设置相应的样式和绑定：

<div cdkDrag>
  <!-- 弹窗内容 -->
</div>

        5. 设置样式和属性：可以通过 CSS 样式和设置属性来控制元素的初始位置和大小，也可以通过绑定属性来动态改变元素的位置和大小。

<div cdkDrag class="draggable-window" [style.width]="windowWidth" [style.height]="windowHeight" [style.left]="windowLeft" [style.top]="windowTop">
  <!-- 弹窗内容 -->
</div>

        6. 实现拖拽效果：通过绑定事件和使用 Angular CDK 提供的指令来实现拖拽效果。可以将 `[cdkDrag]` 和 `[cdkDragBoundary]` 分别应用到控制拖拽的元素和拖拽的边界元素上，来限制拖拽的范围。

//html 内容
<div cdkDrag (cdkDragStarted)="onDragStarted()" (cdkDragEnded)="onDragEnded()" [cdkDragBoundary]="boundaryElement">
  <!-- 弹窗内容 -->
</div>

//ts 文件
export class YourComponent {
  boundaryElement: ElementRef; // 边界元素参考，可以使用 @ViewChild 获取

  onDragStarted() {
    // 拖拽开始时的逻辑
  }

  onDragEnded() {
    // 拖拽结束时的逻辑
  }
}

        通过以上步骤就可以在 Angular 中使用 Angular CDK 实现拖拽改变弹窗大小和位置的功能了。

三、恢复cdkDrag容器内某个特定区域的某些行为

        这里以恢复默认选中文本和复制行为为例。

import { Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div (dblclick)="onDoubleClick()">

      <!-- 特定区域的内容 -->

    </div>
  `,
})
export class MyComponent {

  onDoubleClick() {
    const specificArea = document.querySelector('.specific-area') as HTMLElement;
    const range = document.createRange();
    range.selectNodeContents(specificArea);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    const selectedText = selection.toString();
    if (selectedText) {
      navigator.clipboard.writeText(selectedText);
    }
  }

}

        如果想将选中文本和复制文本内容两个功能分开写，可参考以下代码：

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
  selector: 'app-my-parent-component',
  template: `
    <div>
      <app-my-child-component #childComponent></app-my-child-component>
    </div>
  `,
})
export class MyParentComponent {
  @ViewChild('childComponent', { static: true }) childComponent: ElementRef;

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    const childElement = this.childComponent.nativeElement;

    // 添加双击事件监听器
    this.renderer.listen(childElement, 'dblclick', this.selectAllText);

    // 添加文本复制行为
    this.renderer.listen(childElement, 'copy', this.copyText);
  }

  ngOnDestroy() {
    const childElement = this.childComponent.nativeElement;

    // 移除双击事件监听器
    this.renderer.removeEventListener(childElement, 'dblclick', this.selectAllText);

    // 移除文本复制行为
    this.renderer.removeEventListener(childElement, 'copy', this.copyText);
  }

  selectAllText(event: MouseEvent) {
    const target = event.target as HTMLElement;
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNodeContents(target);
    selection.removeAllRanges();
    selection.addRange(range);
  }

  copyText(event: ClipboardEvent) {
    const target = event.target as HTMLElement;
    const textToCopy = target.innerText;

    // 复制文本到剪贴板
    navigator.clipboard.writeText(textToCopy);
    event.preventDefault();
  }
}

        通过上述代码可以实现Angular恢复cdkDrag容器内子组件特定区域的双击选中全部文本和文本复制功能。

注意：

        使用CDK的时候假如没有特定要求的让整个面板都要是可以拖动的，我们通常是会设置一个拖动手柄，这样就只有设置为手柄的区域是可以拖动面板的，其他地方不会受到任何影响。

//html 内容
<div cdkDrag>
  <!--手柄-->
  <p cdkDragHandle></p>
  <!-- 弹窗内容 -->
  <div></div>
</div>