p-tree: Why is drag and drop not working in this PrimeNG tree?!

UI Components for Angular
Post Reply
paulharv66
Posts: 4
Joined: 03 Jun 2021, 12:04

03 Jun 2021, 15:11

I've been using PrimeNG's Tree for months and it's been working fine. Noticed yesterday that drag and drop is no longer working. I get no errors, I simply can't grab hold of a node in the tree. (Possibly this was because of an Angular upgrade we did (to 11) while we were running primeng 9. Yesterday I upgraded to primeng 11, but this has not fixed the issue.)

I stripped the tree and data down to bare bones as shown below, to verify it is nothing funky in other parts of my code.

This is in the angular HTML template (pretty much straight from https://www.primefaces.org/primeng/v11/#/tree/dragdrop):

Code: Select all

<p-tree [value]="testNodes" 
        [draggableNodes]="true"
        [droppableNodes]="true"
        draggableScope="self"
        droppableScope="self">
</p-tree>
This is from the angular TS code:

Code: Select all

import { TreeNode, TreeDragDropService } from 'primeng/api';
...
@Component({
    selector: 'app-folder-tree',
    providers: [TreeDragDropService],
    templateUrl: './folder-tree.component.html',
    styleUrls: ['./folder-tree.component.scss']
})
export class FolderTreeComponent implements OnInit, OnChanges {
    public ngOnInit(): void {
        this.testNodes = [{
            label: "Root", children: [
                { label: "Sub 1" },
                { label: "Sub 2" }
            ]
        }]
        ...
    }
    ...
}
This renders just fine, but I cannot drag any nodes.

I'm using PrimeNG version 11.4.2 in an Angular app, running Angular 11.2.3 Tested in Chrome, version 90, Edge version 91.

Can anyone suggest what I might try to troubleshoot/fix this?

Thanks very much

paulharv66
Posts: 4
Joined: 03 Jun 2021, 12:04

07 Jun 2021, 13:32

This was why...the following had been added to index.html!...

Code: Select all

<body onDragStart="return false;"
      onDragEnter="return false;"
      onDragOver="return false;"
      onDrop="return false;">
    <app-root></app-root>
</body>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests