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

来源:4-3 打造支持拖拽的属性型指令

木讷25

2018-08-13

@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


写回答

1回答

接灰的电子产品

2018-08-14

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

0
2
接灰的电子产品
回复
木讷25
看一下我的 github 源码对比一下吧 https://github.com/wpcfan/taskmgr
2018-08-15
共2条回复

Angular打造企业级协作平台,让你在Angular领域中出类拔萃

全网首个介绍官方 Material 组件库用法与 Redux 在 Angular 中的应用

998 学习 · 536 问题

查看课程