老师，请问为什么我很难触发dragstart，即使触发了，ev.target也不是<mat-list-item>

Question

@HostListener('dragstart', ['$event'])

onDragStart(ev: Event) {

    console.log('this.el.nativeElement', this.el.nativeElement); //打印值：<mat-list-item>

    console.log('ev.target', ev.target); //打印值：<div class="mat-list-item-content">

    if (this.el.nativeElement === ev.target) {

        this.rd.addClass(this.el.nativeElement, this.draggedClass);

        console.log('added class');

    }

}

@HostListener('dragend', ['$event'])

onDragEnd(ev: Event) {

    if (this.el.nativeElement === ev.target) {

        this.rd.removeClass(this.el.nativeElement, this.draggedClass);

    }

}

GitHub: https://github.com/LeMueller/angular_task_manager

这样导致
this.el.nativeElement === ev.target
总是false

Answer 1

接灰的电子产品 2018-08-14 01:04:02

dragstart 是在拖拽开始的时候触发，你没有触发，你可以在事件中 console.log 一下就知道有没有触发了。

• 提问者 木讷25 #1

  谢谢老师的回复。我更新了问题。 事件是被触发了的，element我也打印出来了，但是target 总是 nativeElement 的子节点，所以无法添加class。请老师解答。

• 接灰的电子产品 回复 提问者 木讷25 #2

  看一下我的 github 源码对比一下吧 https://github.com/wpcfan/taskmgr