每一个你不满意的现在,都有一个你不努力的曾经. 网站首页 > js
nz-zorro自定义树菜单(添加拖动事件和右键)
发布时间:2019-07-19 16:54:58 修改时间:2019-07-19 16:54:58 阅读:8268 评论:0 0
<nz-tree
#treeCom
[nzData]="nodes"
nzDraggable
(nzClick)="activeNode($event)"
(nzOnDrop)="OnDragOverTo($event)"
(nzOnDragOver)="OnDragOverTo($event)"
(nzDblClick)="openFolder($event)">
<ng-template #contextTemplate>
<ul nz-menu nzInDropDown>
<li nz-menu-item (click)="selectDropdown($event, 'folder')">从分组中移除</li>
</ul>
</ng-template>
<ng-template #nzTreeTemplate let-node>
<span class="custom-node" [class.active]="activedNode?.key===node.key">
<span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate)" >
<i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
<span class="folder-name" data-id="{{node.key}}">{{node.title}}</span>
<span class="folder-desc">10</span>
</span>
<span *ngIf="node.isLeaf" >
<i nz-icon [type]="node.isExpanded ? 'slack-square' : 'slack-square'" (click)="openFolder(node)"></i>
<span class="file-name" draggable data-id="{{node.key}}" (click)="getData($event,node.origin)" (contextmenu)="contextMenu($event,contextTemplate,node.origin)">{{node.title}}</span>
</span>
</span>
</ng-template>
</nz-tree>
主要代码:
右键:(contextmenu)="contextMenu($event,contextTemplate)"
拖动事件:树菜单添加nzDraggable
需要拖动的子菜单添加draggable (注:html代码去掉nz 因为nz为nz-zorro标签属性)
回复列表
关键字词:nbsp,lt,gt,span,event,菜单