为什么拖放功能在此 PrimeNG 树中不起作用?

问题描述 投票:0回答:2

我已经使用 PrimeNG 的 Tree 几个月了,今天注意到拖放功能不再起作用。我没有收到任何错误,我只是无法抓住树中的节点。

我将树和数据剥离到只剩下骨头,如下所示,以验证它在我的代码的其他部分中没有什么奇怪的。

这是在 Angular HTML 模板中(几乎直接来自 https://www.primefaces.org/primeng/v11/#/tree/dragdrop):

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

这是在 Angular TS 代码中:

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" }
            ]
        }]
        ...
    }
    ...
}

这渲染得很好,但我无法拖动任何节点。

在 Angular 应用程序中使用 PrimeNG 版本 11.4.2,运行 Angular 11.2.3 在 Chrome 版本 90、Edge 版本 91 中测试。

任何人都可以建议我尝试解决/解决这个问题吗?

谢谢

angular drag-and-drop primeng-tree
2个回答
0
投票

追踪到已添加到index.html中的这个!...

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

0
投票

如果有独立组件,请将 DragDropService 添加到提供程序。

`@Component({
  standalone: true,
  imports: [TreeModule,DragDropModule],
  selector: 'app-main-menu-list',
  templateUrl: './main-menu-list.component.html',
  styleUrls: ['./main-menu-list.component.css'],
  providers:[TreeDragDropService]
})`
© www.soinside.com 2019 - 2024. All rights reserved.