未触发拖动事件答案

【问题标题】：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 标记。

标签： html angular ionic-framework draggable drag

【解决方案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 有效。