Search code examples
angulardrag-and-dropprimeng-tree

Why is drag and drop not working in this PrimeNG tree?


I've been using PrimeNG's Tree for some months and noticed today that drag and drop is no longer working. I get no errors, I simply can't grab hold of a node in the tree.

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):

<p-tree [value]="testNodes" 
        [draggableNodes]="true"
        [droppableNodes]="true"
        draggableScope="self"
        droppableScope="self">
</p-tree>

This is in the angular TS code:

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.

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


Solution

  • Tracked it down to this that had been added in index.html!...

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