Ng-zorro-antd: Tree : drag and drop with custom templates

[Maryannah]

Reproduction link

https://stackblitz.com/edit/angular-mtme3w?file=src/app/app.component.ts

Steps to reproduce

Try drag and drop after opening the link : it works. Remove the comments at the lines 17 and 30 to add custom templates : drag and drop stopped working.

What is expected?

The drag and drop with custom templates should work.

What is actually happening?

The elements of the tree are considered text and are highlighted by the cursor when trying to drag and drop

| Environment | Info |
|---|---|
| ng-zorro-antd | 7.5.1 |
| Browser | any |

[malini1993]

Please add these attrs to your template title (first span) to make it work again

[attr.draggable]="true"
[attr.aria-grabbed]="true"
[class.draggable]="true"

Complete template code should look like this

<ng-template #nzTreeTemplate let-node>
        <span class="custom-node" 
            [attr.draggable]="true"
            [attr.aria-grabbed]="true"
            [class.draggable]="true"
            [class.active]="activedNode?.key === node.key">
          <span *ngIf="!node.isLeaf">
            <i [style.margin-right.px]="12" nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'"    (click)="openFolder(node)"></i>
            <span>{{ node.title }}</span>
            <b [style.margin-left.px]="12">Folder</b>
          </span>
          <span *ngIf="node.isLeaf">
            <i [style.margin-right.px]="12" nz-icon type="file"></i>
            <span class="file-name">{{ node.title }}</span>
            <b [style.margin-left.px]="12">Document</b>
          </span>
        </span>
</ng-template>

[madhankumar05]

super thank you so much

[xiaotoya]

It doesn't work in version 1.8.x, can you help me. I just use the code above.

-----OK, I found the mistake. It works, thanks a lot.

[whiteblueblack]

thank you ~