thisbeyond
Nested drag and drop
Would be good to have an example of nested drag and drop, as well as test and improve the API if necessary for this use case.
Imagine a classic filetree for example.
See also someone experimenting with this type of interface: https://codesandbox.io/embed/solid-nested-dnd-prototype-uu5jm?file=/src/App.tsx&codemirror=1
Hi, just here to express my interest in a file tree-style drag and drop demo. Unfortunately, the above link no longer seems to work/load. (I'm just futzing around with a side project - please don't take this as an obligation or time-sensitive issue!)
Ah, that link was just an example of what someone was trying to do - not a working implementation for Solid DnD. I've updated the comment to be clearer.
I'll take a look at a Solid DnD example on the main site in the near future - but if you get something first, please feel free to share a PR.
Really amazing project Martin.
Would really like to use your project and wondering if something like the link below can be made:
I tried to do it with dnd-action and that package is not able to support it. Perhaps yours can.
https://svelte.dev/repl/1f3437021e76495e83746200ed002096?version=3.46.4
Desired Behaviour:
- Accordions can be reordered with dragndrop.
- Accordions cannot be dragndrop into subaccordions.
- Subaccordions can be reordered within same parent Accordion.
- Subaccordions can be dragndrop into other parent Accordions.
- When a subaccordion is dragndrop into other parent Accordions, it will be added to the new parent Accordion and removed from the accordion where it came from.
Thanks for the kind words.
I haven't tried to do something similar yet. I'm sure the basic building blocks will make it possible in solid-dnd, but I'm also sure there will be things to figure out. In other words, I don't believe it will just work out of the box.
I would be curious about any attempt you make and where you hit issues that I might be able to address in the core. Meanwhile, I'm working on a related example which might uncover some better answer here.
By the way, I'm surprised https://github.com/isaacHagoel/solid-dnd-directive couldn't do it as based off same Svelte lib as in your example. What was the issue faced there?
Hi Martin,
That example that I made was in Svelte using Isaac's dragndrop project. If you play with the example, you can see that draging a subaccordion into another accordion doesn't work as expected. The subaccordion should be removed from where it was dragged from and added into the new accordion.
I didn't try to use his solidjs because the svelte project is not working correctly.
Ah, understood.
I'm making good progress on some improvements to solid dnd that might help for your use case. I'll post an update here once they are done.
0.5.0 has been released and should make implementing nested use cases easier as it supports seamless recreation of draggables/droppables during active drag (as well as a new closestCorners collision detector). You can see this working in the new multiple lists example on https://solid-dnd.com/
However, I will leave this issue open until I or someone else successfully implements a working nested example 😄
Note: 0.5.0 release contains breaking changes - see changelog for details.
The "Board" example on the site now gives some example of nested in that both the columns and the items within them can be dragged and sorted independently. However, I'll leave this open as I also want to add a more specific nested example where items can be arbitrarily nested within each other.
Any update on this? I'd love a nested example, currently trying to figure it out myself but no luck.
