使用mousedown HostListener移动元素(拖放)

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

@Component({
  selector: 'app-draggable-element',
  template: `
    <div class="draggable-element" [style.left.px]="left" [style.top.px]="top" (mousedown)="onMouseDown($event)">
      Drag me!
    </div>
  `,
  styles: [
    `
    .draggable-element {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: #ccc;
      cursor: move;
    }
    `
  ]
})
export class DraggableElementComponent {
  private isDragging = false;
  private startX = 0;
  private startY = 0;
  private left = 0;
  private top = 0;

  @HostListener('document:mousemove', ['$event'])
  onMouseMove(event: MouseEvent) {
    if (this.isDragging) {
      const offsetX = event.clientX - this.startX;
      const offsetY = event.clientY - this.startY;
      this.left += offsetX;
      this.top += offsetY;
      this.startX = event.clientX;
      this.startY = event.clientY;
    }
  }

  @HostListener('document:mouseup')
  onMouseUp() {
    this.isDragging = false;
  }

  onMouseDown(event: MouseEvent) {
    this.isDragging = true;
    this.startX = event.clientX;
    this.startY = event.clientY;
  }
}