-
Notifications
You must be signed in to change notification settings - Fork 96
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Re-order nodes with drag and drop #13
Comments
Hi ! Could you please tell us why was the PR #21 deleted ? Actually I would be very interested to drag element from the tree to an other drop element in the page. |
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 👍 |
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. |
Hey ! |
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 :-) |
Using Droppable react-beautiful-dnd (and Portals depending on your needs) should be very straightforward. |
There are several tricky things on dnd that we need to keep in mind: I can see dragging meaning 3 things:
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 |
@guillaumesayegh Have you implemented this already? 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... |
Here is working example: sample |
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 Thanks for any insights :-) |
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. |
OK. Downgraded react-beautiful-dnd to 9.0.2 and now everything works. Oh well... |
@guillaumesayegh Thanks very much! You helped me get on track with this again. I will submit a bug report with react-beautiful-dnd. |
Glad you've made it 👍 |
Add the ability to re-order nodes using drag and drop.
The text was updated successfully, but these errors were encountered: