Re-order nodes with drag and drop

[diogofcunha]

Add the ability to re-order nodes using drag and drop.

[guillaumesayegh]

Hi !

Could you please tell us why was the PR #21 deleted ?
It would be very interesting to add Draggable behaviour :)

Actually I would be very interested to drag element from the tree to an other drop element in the page.

[diogofcunha]

Hey @guillaumesayegh.

I like to first give it a few tries before committing to definitive solution, specially since this can be a huge compromise. I didn't like the way things were going and want to start all over again.

I have more experience with dnd now, and I will have another fresh look into that in the future.

If you want to drag form the tree to another element in the page I don't see what blocks you atm. you have full control over the node render. as long as you make the node a draggable element it should be ok. I could help you with that if necessary 👍

[NicoleRauch]

Are there any news on this? I need to add reordering by drag-and-drop to my tree and I wanted to check back to see whether there is a "native" solution available before I try to add something myself.
Thanks!

[guillaumesayegh]

Hey !
Actually there's no native solution for this. So I have been doing draggable by my own using react-dnd over the render of the node.
I consider it would be still very interesting to improve this library by adding "Draggable" behaviour the same way we use "Expandable" for example.
Let me know if you want any sample code.

[NicoleRauch]

Thanks for the offer! Meanwhile I've applied draggable together with the corresponding events, and I found it very simple to use for dragging a node onto another node.

I'm also planning to implement dragging between two other nodes (for reordering purposes) and currently I imagine this will be a lot harder because I want to insert a line between the nodes to visualize the drop area. If you have any example code for this, I'd be grateful if I could take a look at it! Cheers :-)

[guillaumesayegh]

Using Droppable react-beautiful-dnd (and Portals depending on your needs) should be very straightforward.

[diogofcunha]

There are several tricky things on dnd that we need to keep in mind:

I can see dragging meaning 3 things:

• Drag between nodes to re-order or move nodes in the tree hierarchy
• Drag into a node and make the dragged node a children

This makes dnd for the tree behave in both x and y axis and the x part is not trivial. This also means that we probably need to have some slick animations and interactive node measures to make sure the dnd experience looks nice.

I've been busy lately and I'm going on holiday soon, I need to figure out a way to do all this work after my holiday, and making it so that the tree keeps the lack of opinion on implementation details

[NicoleRauch]

@guillaumesayegh Have you implemented this already?
I gave react-beautiful-dnd a try, and I wrapped my Tree into a DragDropContext and a Droppable, and I wrapped each tree node into a Draggable, but as soon as I try to drag something, the whole thing explodes with

I suspect this is because the tree does not have proper children but instead gets this child generator function?

Do you have a working example using react-dnd? Happy to try out that one for a change...

[guillaumesayegh]

Here is working example: sample
Basically it's a virtualized tree and each node can drag out of the list. I used a React portal to hack the dragging element.

[NicoleRauch]

Thank you very much for the sample! I stripped it down to make it compile (basically removed the search stuff and the icon), but I still get the same error as soon as I drag the node:

So the only other option I see is, maybe you're using a different version? Mine is
"react-beautiful-dnd": "10.1.0",

Thanks for any insights :-)

[guillaumesayegh]

Yeah I'm using DND 8.0 and RVT 2.3. Hope this gonna help you out. Otherwise you should ask for support in react-beautiful-dnd project.

[NicoleRauch]

OK. Downgraded react-beautiful-dnd to 9.0.2 and now everything works. Oh well...

[NicoleRauch]

@guillaumesayegh Thanks very much! You helped me get on track with this again. I will submit a bug report with react-beautiful-dnd.

[guillaumesayegh]

Glad you've made it 👍