未触发拖动事件

Posted 2023-05-08

【中文标题】未触发拖动事件

【英文标题】：Drag events not triggered

【发布时间】：2020-01-14 04:21:10

【问题描述】：

我想使用可拖动的事件。 所以dragStart 工作得很好，但是drag 和dragEnd 永远不会被触发。

这是我的 html 元素

<div [ngClass]="select ? 'show-re' : 'hide-re'" *ngIf="real_estate" id="re">

document.getElementById("re").addEventListener('dragstart', (event) => 
    this.start = event.clientX;
    console.log(this.start);
)
document.getElementById("re").addEventListener('drag', (event) => 
    console.log(event.clientX);
)
document.getElementById("re").addEventListener('dragend', (event) => 
    console.log(this.end)
    this.end = event.clientX;
    if (this.end - this.start > 100)
        this.hideRe();
)

【问题讨论】：

假设上面的ts代码是用ngAfterViewInit()生命周期钩子写的，那么real_estate变量最初的值是多少，它会改变吗？因为如果是这样，那么随着值的变化，该元素将频繁地从 DOM 中添加和删除。所以这可能会导致事件监听器被移除。

这段代码是在real_estate之后初始化的，它从未改变过。一切都非常适合dragstart 事件

real_estate 的初始值是多少？你把这段代码放在哪里了？在任何生命周期或从生命周期钩子调用的函数中？

real_estate 是 id: 12, title: "Zodiak", area: "432" 的对象。此函数在 GoogleMaps 标记上的 click 事件之后调用，它对应于我的 real_estate 标记。

【参考方案1】：

Angular 提供 API 来直接绑定到 HTML 元素生成的事件。更好地使用这些 API，这样您就不必担心添加/删除事件侦听器。您可以像这样绑定到拖动事件。

<div [ngClass]="select ? 'show-re' : 'hide-re'" *ngIf="real_estate" id="re" (dragstart)="dragStart($event)" (drag)="onDrag($event)" (dragend)="onDragEnd($event)" draggable="true"></div>

在您的 component.ts 中，您可以将这些事件定义为

dragStart($event) 
  // do stuff...


onDrag($event) 
  // do stuff...


onDragEnd($event) 
  // do stuff...

另外请注意，我为 div 元素添加了 set draggable 属性。

【讨论】：

是的，自从我发布了我的问题以来，我已经尝试过这种方式，但只有 dragStart 有效。