Tree DragDrop doesn't allow drag and drop between nodes

[adamerose]

[X] bug report
[ ] feature request
[ ] support request

PrimeReact Tree doesn't allow dropping between nodes. It works properly in PrimeNg as shown below:

Ng Working:
https://stackblitz.com/edit/primeng-treedragdrop-demo

React Not working:
https://codesandbox.io/s/8fq43

primeflex 2.0.0
primeicons 4.1.0
primereact 6.4.1
react 17.0.2
react-dom 17.0.2
react-transition-group 4.4.2

[zamanapavel]

temporary solution:
add height to p-treenode-droppoint class.
and some background-color to .p-treenode-droppoint-active
currently height is 0 so you cannot hover on proper element to drop

[adamerose]

temporary solution: add height to p-treenode-droppoint class. and some background-color to .p-treenode-droppoint-active currently height is 0 so you cannot hover on proper element to drop

Awesome didn't realize it was just a styling problem. Here's a sandbox of the fix for anyone interested: https://codesandbox.io/s/busy-payne-cdk7i?file=/index.css:3300-3460

Added @zamanapavel's two lines plus a background color on hover and I think it works the same as PrimeNG now.

.p-treenode-droppoint {
  height: 4px;
}

.p-treenode-dragover {
  background-color: #e9ecef;
}

.p-treenode-droppoint-active {
  background-color: #a6d5fa;
}

Can see more styling here, but I was happy with just the 3 above.
https://github.com/primefaces/primeng/blob/2444986ee9e47dc4a502ef0b1eaf2e87d51ad3e7/src/app/components/tree/tree.css
https://github.com/primefaces/primeng/blob/ca40b1340511b9437726000b33fa4d407af6d926/src/assets/components/themes/nova/theme.css

[Alexei-Ruksha]

Hi @mertsincan
could also please take a look at the commit c5cf0c5? There are a lot of changes in Tree.css so it might some other issues can be solved by reviewing that commit.

Thank you in advance,
Alexei

[mertsincan]

Hi,
Thanks a lot! Fixed now!

Best Regards,