Angular 中如何实现鼠标拖拽-JavaScript中文网-JavaScript教程资源分享门户

引言

在很多实际场景中，需要实现鼠标拖拽的功能，比如我们经常在电脑上使用拖动文件的功能。在 Web 前端开发领域，Angular 是一个非常流行的框架之一，本文将介绍如何在 Angular 中实现鼠标拖拽的功能。

实现思路

鼠标拖拽的实现基本上分以下两个步骤：

鼠标按下时记录位置，移动鼠标时实时获取位置差；
根据位置差移动拖拽元素。

在 Angular 中实现鼠标拖拽的方式有很多种，这里我们列举两种常见的方式。

方式一：使用 HostListener

HostListener 装饰器可以很方便地监听元素事件。我们可以在元素上添加 mousedown、mousemove 和 mouseup 事件，然后根据这些事件实现拖拽。

1. 添加 HostListener

在组件中添加以下代码：

// www.javascriptcn.com code example
import { Component, HostListener } from '@angular/core';@Component({
  selector: 'app-draggable',
  template: '<div class="drag-item">拖拽元素</div>',
  styleUrls: ['./draggable.component.css']
})
export class DraggableComponent {
  private isDown = false;
  private startX: number;
  private startY: number;
  private translateX = 0;
  private translateY = 0;
  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    this.isDown = true;
    this.startX = event.pageX - this.translateX;
    this.startY = event.pageY - this.translateY;
  }
  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (this.isDown) {
      this.translateX = event.pageX - this.startX;
      this.translateY = event.pageY - this.startY;
    }
  }
  @HostListener('document:mouseup', ['$event'])
  onMouseUp(event: MouseEvent) {
    this.isDown = false;
  }
}

2. 添加样式

在组件的 CSS 文件中添加以下代码：

.drag-item {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

以上代码实现了在鼠标按下、移动和松开时分别触发的回调函数。具体来说，mousedown 事件记录鼠标按下时的位置，mousemove 事件根据位置差移动拖拽元素，mouseup 事件将 isDown 标记为 false。

方式二：使用 @ViewChild

ViewChild 装饰器可以从组件中获取其子元素或组件实例，使用 ViewChild 可以实现更灵活、更容易设置的鼠标拖拽功能。

1. 在 HTML 模版中添加子元素

在组件的 HTML 文件中添加以下代码：

<div class="drag-item" #dragItem>拖拽元素</div>

2. 在组件中添加 ViewChild

在组件中添加以下代码：

// www.javascriptcn.com code example
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-draggable',
  template: `
    <div class="drag-item" #dragItem>拖拽元素</div>
  `,
  styleUrls: ['./draggable.component.css']
})
export class DraggableComponent implements OnInit {
  @ViewChild('dragItem') dragItemRef: ElementRef;
  private isDown = false;
  private startX: number;
  private startY: number;
  private translateX = 0;
  private translateY = 0;
  ngOnInit() {
    const dragItem = this.dragItemRef.nativeElement;
    dragItem.addEventListener('mousedown', this.onMouseDown.bind(this));
    document.addEventListener('mousemove', this.onMouseMove.bind(this));
    document.addEventListener('mouseup', this.onMouseUp.bind(this));
  }
  onMouseDown(event: MouseEvent) {
    this.isDown = true;
    this.startX = event.pageX - this.translateX;
    this.startY = event.pageY - this.translateY;
  }
  onMouseMove(event: MouseEvent) {
    if (this.isDown) {
      this.translateX = event.pageX - this.startX;
      this.translateY = event.pageY - this.startY;
      const dragItem = this.dragItemRef.nativeElement;
      dragItem.style.transform = `translate(${this.translateX}px, ${this.translateY}px)`;
    }
  }
  onMouseUp(event: MouseEvent) {
    this.isDown = false;
  }
}

以上代码与方式一相似，只不过使用 ViewChild 从组件中获取了子元素，从而可以更方便地监听事件，并移动拖拽元素。

意义

本文介绍了使用两种方式在 Angular 中实现鼠标拖拽的功能。鼠标拖拽是一种常见的需求，在实践中许多场景都需要使用鼠标拖拽。本文介绍的两种方式都是常见且实用的，具有很高的学习和指导意义。

示例代码

在 GitHub 上可以找到本文所述的示例代码。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67c02070314edc2684641cb4

Angular 中如何实现鼠标拖拽

引言