nz-zorro自定义树菜单（添加拖动事件和右键）

发布时间：2019-07-19 16:54:58 修改时间：2019-07-19 16:54:58 阅读：8366 评论：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标签属性）

---