How to build a nested sortable tree with a flat DOM structure

[mtn220]

I am trying to make a flat list with sub-items. Basically I want to conditionally indent items to make them appear to have a tree structure, without actually nesting SortableContext. When dragging, the offsetLeft / x position of the drag overlay or dragged component would determine if the dragged component should preview nested or not. This library seems awesome but I'm having trouble getting my specific use case to work.

I think I could make it work if I could somehow get the transform / offsetLeft of the actual drag overlay from within each list item. That way, if the drag overlay is offset to the right sufficiently, the currently dragging component could render a preview of itself in the correct position. I know that when dropped, the onDragEnd handler gets the delta x that I can use to update state in the way I'm thinking. It's just getting a preview that I'm struggling with.

I'm open to alternative suggestions, even if they require a totally different structure. I just don't want a big space around each item that can act as a droppable zone for sub-items or a bunch of space between items either.

Thanks!

[clauderic]

Hey @berlindx, you can take a look at this PR which achieves this exact use-case #76. The PR needs a bit of polish before being merged but it should give you a very good idea of how to build this: https://5fc05e08a4a65d0021ae0bf2-tzokynfxpb.chromatic.com/?path=/story/presets-tree-vertical--basic-setup

[mtn220]

Yes, that's exactly what I was trying to build. Looks like what I was missing was grabbing the delta.x from the onDragMove event and passing it down as a prop to the active component. There's lots of other important parts in there too to make it work well (like the keyboard stuff) that I wasn't looking forward to figuring out. Thanks for all your work on this library. It's really great!