PrimeNG - Tree DragDrop, nodes are not draggable

Question

I am following this example from the official PrimeNG website to implement a very basic DragDrop Tree (I only need the re-ordering functionality, all nodes are leaves without children). The tree (which is constructed dynamically) is constructed successfully, but the nodes shown are not draggable, so I cannot move them up or down. Photo below

Code Below:

.html file

 <p-tree [value]="getItemsInTreeForm()" [draggableNodes]="true" [droppableNodes]="true"
        draggableScope="self" droppableScope="self">

 </p-tree>

.ts file

public getItemsInTreeForm(): TreeNode[] {
 
  let items = [{
  label: "Item1",
  data: "Backup Folder",
  expandedIcon: "pi pi-folder-open",
  collapsedIcon: "pi pi-folder"
},
  {
    label: "Item2",
    data: "Backup Folder2",
    expandedIcon: "pi pi-folder-open",
    collapsedIcon: "pi pi-folder"
  },
  {
    label: "Item3",
    data: "Backup Folder3",
    expandedIcon: "pi pi-folder-open",
    collapsedIcon: "pi pi-folder"
  }
]
return items as TreeNode[];
}

NOTE: I have tried this workaround but in vain as nothing changed, the console of the browser does not indicate any error too.

PrimeNG version - 12.1.0, Angular version - 12.2.3, Node version - 14.17.0

Answer 1

Provide the TreeDragDropService

You need to provide the TreeDragDropService

For example:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [TreeDragDropService], // Without it, it does not work (drag & drop)
})

Initialize a property that will be manipulated by the tree

You need to have a proper variable to support your tree (not just your function return)

Initialize a property of your component with the result of the getItemsInTreeForm() then pass it to the template.

See in the documentation that they are not passing directly the result of getFiles() but taking an intermediate variable to support the tree: this.nodeService.getFiles().then(files => this.files1 = files);

My StackBlitz

Here the link to the working Drag & Drop Tree on PrimeNG 12 with your data and method getItemsInTreeForm()