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

Posted 2023-05-08

【中文标题】可拖动按钮时如何将单击事件设置为禁用？

【英文标题】：How can I set the click event to disabled when draggable a button?

【发布时间】：2021-10-11 04:18:46

【问题描述】：

我创建了一个可移动的.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!");
  

【参考方案1】：

似乎在 Github 上一直在讨论这个问题，还有一个通过 rxjs 使用 fromEvent 的示例，但我在你的 stackblitz 中没有成功使用它。

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

---

作为替代方案，这个粗略的 POC 展示了您可以通过执行以下操作来完成此任务的一种方法。

DI Renderer2 in 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;

堆栈闪电战

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