微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Angular Material Mat-Tree dragover 事件触发不必要

如何解决Angular Material Mat-Tree dragover 事件触发不必要

我有一个带有事件的 mat-tree,用于拖放功能我有两个组件(一个用于源树,另一个用于目标树)。我正在将项目从源树拖放到目标树上。

问题是当一个项目被拖放时,即使项目已经被放下,dropover 事件也会继续触发。

功能在 Edge 浏览器中正常运行,但在 Chrome 中不运行。在 Chrome 中,我们可以看到dragover 事件没有必要触发。

    <mat-tree-node *matTreeNodeDef="let node; when: hasmicrochild" matTreeNodePadding
                (dragover)="handleDragOver($event,node);" (dragend)="handleDragEnd($event,node);"
                (drop)="handleDrop($event,node);" [ngClass]="getStyle(node)">
                <button mat-icon-button matTreeNodetoggle [attr.aria-label]="'toggle ' + node.item">
                    <mat-icon class="mat-icon-rtl-mirror">
                        {{TreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                    </mat-icon>
                </button>
                <span class="checklist-leaf-node">
                    <span class="nodeContent">
                        <div *ngIf="node.queryType; else elseBlock">{{node.item}} ({{node.queryType}})</div>
                        <ng-template #elseBlock>{{node.item}}</ng-template>
                    </span>
                </span>
            </mat-tree-node>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。