Nested sortable about dnd-kit

[fedotxxl]

@clauderic can you provide an example with the support of dragging an element from one container to another one + dragging a container from one to another?

There are a lot of dnd libraries but none of them supports it. It's required to implement a complex tree structure with folders and files (and other ones) where you can drag folders and drag files.

[clauderic]

@mxck the library supports this, as mentioned above, I don't have time to fully update the onDragOver and onDragEnd logic at the moment, but I left some comments of what would need to be implemented from a consumer perspective to make it work:
https://codesandbox.io/s/react-nested-dnd-kit-forked-m1lkg?file=/src/App.js

[clauderic]

I don't have time to fully update the onDragOver and onDragEnd logic at the moment, but I left some comments of what would need to be implemented:
https://codesandbox.io/s/react-nested-dnd-kit-forked-m1lkg?file=/src/App.js

The main issue with your example was that you need to use a DragOverlay because the draggable element will potentially be re-parented in onDragOver if the depth changes mid-drag, causing it to unmount and re-mount. See https://docs.dndkit.com/api-documentation/draggable/drag-overlay#when-should-i-use-a-drag-overlay

The second issue is that you need to make sure you have a separation between presentational components and draggable/droppable/sortable components so that you can render the presentational ones within DragOverlay, rather than rendering draggable/sortable components within the DragOverlay, which is not supported. See the recommended patterns outlined here: https://docs.dndkit.com/api-documentation/draggable/drag-overlay#presentational-components

[jarredwitt]

Apologize for reviving a closed issue, but wanted to share my attempt at accomplishing this since I struggled to find an exact example. Here's a GIF of a rows, columns and item demo I made that I think accomplishes the nested scenario that @fedotxxl mentions above. Put some locks in place to try and make the UI behave - only columns can be added to rows.

Here's the code - https://codesandbox.io/s/dnd-kit-nested-containers-kvdgn?file=/src/app.js (inspired by some of the code from this repo's stories).

It's a little rough to say the least and could be much better, but I feel like I've gotten a hang on the library so going to move on to implementing what I need in my actual codebase.

[clauderic]

Closing this issue as it is more of a help request than an issue. Feel free to reopen if you run into bugs.

[mxck]

@clauderic in your corrected example, it is still not possible to move the entities through the tree.
Does the library support that? In the storybook examples only have moving between containers, but no nested containers.