p-tree: how to reorder sibling nodes

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

10 Jun 2021, 19:44

I have this tree...

Code: Select all

> rootNode
    > node1  <-- drag this node from here...
    > node2
          .....      <-- to here        
    > node3 
This was working fine using primeng 9, but now I've upgraded to version 11.4.2 it no longer works.
  • When I drag between node2 and node3 a red bar appears
  • In my handler for onNodeDrop, dropNode references node3 NOT rootNode
  • In my handler for onNodeDrop, event.dropIndex no longer exists, and event.index doesn't help me distinguish a reorder from a "move into"
I have the following properties set on the tree...

Code: Select all

            [draggableNodes]="true"
            [droppableNodes]="true"
            draggableScope="self"
            droppableScope="self"
Any pointers? Is there a new property I need to set?

Thanks!

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

11 Jun 2021, 12:09

Answering my own question in case this helps someone else...

I reimplemented my method which determines whether the drop event is a reordering of sibling nodes or a move into another node...
It used to be...

Code: Select all

private isReordering(event) {
        return event.dropIndex != null;
}
...now it's this...

Code: Select all

private isReordering(event) {
        var targetNodeClassName = event.originalEvent.target.className;
        return targetNodeClassName.match(/p-treenode-droppoint-active/); // primeng applies this class to the <li> representing the drop zone between two sibling nodes
}
...horribly brittle, but it works for now...

As far as the red line, that was simply the styling for the theme, so I overrode that in my scss file.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests