Use basic Drag&Drop With A tree in PrimeNG

I work with primeng (v.17.18). I want to use their drag&drop system. I have no problem using it, or even Tree.

However, I'd like to use a mix of the two.

I have a list of items on one side that I want to drop into a tree.

Something like :

<div class="container">
<!-- Source -->
<div class="list-container">
<h3>Source</h3>
<ul>
<li
*ngFor="let item of sourceList"
pDraggable="treeItems"
[dragData]="item"
[ngStyle]="{ cursor: 'move' }"
>
{{ item }}
</li>
</ul>
</div>

<!-- P-Tree -->
<div class="tree-container">
<h3>Tree</h3>
<p-tree
[value]="treeNodes"
[draggableNodes]="false"
droppableNodes="true"
pDroppable="treeItems"
(onNodeDrop)="onNodeDrop($event)"
></p-tree>
</div>
</div>


But cane doesn't work. And I don't even know if I can make it work...

One solution would be to override the CSS style of the and have a “flat” tree for Drag and Drop into a basic tree.

Thanks for your advice

Continue reading...