可拖动按钮时如何将点击事件设置为禁用？

Question

我创建了一个 movable.directive.ts，您可以使用它在前端移动对象。该指令到目前为止也有效。不幸的是，我的问题是当我移动按钮时我的点击事件总是打开。有没有办法停用可拖动开始处的点击并在可拖动结束时重新激活它？我的 Stackblitz：https://stackblitz.com/edit/draggable-system-azomjp?file=app%2Fapp.component.html

我的代码：

// movable.directive.ts
 @Input('appMovable') set movable(movable: boolean) {
    this.enabled = movable;
  }

  @HostListener('dragStart', ['$event']) onDragStart(event: PointerEvent): void {
    this.moving = true;
    this.startPosition = {
      x: event.clientX - this.position.x,
      y: event.clientY - this.position.y
    };
  }

  @HostListener('dragMove', ['$event']) onDragMove(event: PointerEvent): void {
    this.position = {
      x: event.clientX - this.startPosition.x,
      y: event.clientY - this.startPosition.y,
    };
  }

  @HostListener('dragEnd') onDragEnd(): void {
    this.moving = false;

    if (this.reset) {
      this.position = {
        x: 0,
        y: 0,
      };
    }
  }

// HTML
<button (click)="openAlert()" [appMovable]="true">
  My Button
</button>

// TS
openAlert() {
    alert("Hello World!");
  }

Answer 1

似乎正在 Github 上对此进行讨论，还有一个通过 rxjs 使用 fromEvent 的示例，但我在您的 stackblitz 中没有成功使用它。

https://github.com/angular/angular/issues/9587

作为替代方案，这个粗略的 POC 演示了一种您可以通过执行以下操作来实现此目的的方法。

DI Renderer2 在 moveable.directive.ts

constructor(public element: ElementRef, private sanitizer: DomSanitizer, private ren: Renderer2) {
    super();
  }

然后在你的 dragMove 中设置 pointer-events: none

@HostListener('dragMove', ['$event']) onDragMove(event: PointerEvent): void {
    this.ren.setStyle(this.element.nativeElement, 'pointer-events', 'none');
    this.position = {

然后在你的 dragEnd 中删除它

 @HostListener('dragEnd') onDragEnd(): void {
    this.ren.removeStyle(this.element.nativeElement, 'pointer-events');
    this.moving = false;

STACKBLITZ

https://stackblitz.com/edit/draggable-system-etearc?file=app/movable/moveable.directive.ts

可拖动按钮时如何将点击事件设置为禁用？

How can I set the click event to disabled when draggable a button?

javascript

draggable

typescript

angular