React DnD setup for nested sortable example?

[3Cbwaltz]

I am working on a nested list component using react-dnd and I have used the simple sortable example. I can get the drag/drop working for first-level nodes, but then all children produce "TypeError: node is undefined" when trying to drag. Basically I have a menu component and an item component, and the item component calls itself if it has children.

Do you have an example for nested sortable lists?

[gaearon]

If you have an error please produce an example reproducing this error.
I wish I could guess what goes on from an error message but alas I can't. 😉

[3Cbwaltz]

Here you go:
http://stackoverflow.com/questions/33659180/react-dnd-not-sure-how-to-get-drag-and-drop-to-fire-for-nested-components-of-t

If you need anything else let me know.

[tamagokun]

I have a working nested sortable setup in an app I am working on.

I'm going to work on cleaning it up and throwing it up on Github.

[gaearon]

@3Cbwaltz

I copy pasted your example and couldn't get it to run. It doesn't explain what data prop should be like. Unfortunately there's no way I can diagnose your issue without you providing a complete project (with dependencies specified, etc) that reproduces it. I'm closing this issue but I'm happy to reopen if you make it possible for me to see what's up without manually copy pasting files and finding out there's not enough information in them.

[3Cbwaltz]

@tamagokun did you say you had a nested sortable example? I have been able to flesh out my components a little more but still haven't had time to wrap my head around nested sortable. Here is a link to the full source code https://bitbucket.org/bwaltz6/flow-builder/overview. Sorry, it's a lot of code and you probably won't be able to compile it because it is using a company specific npm repository. If needed I can hone it down. The files of interest are here:

Wrapper
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/FlowBuilder.js?at=master&fileviewer=file-view-default

Menu
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/menu.js?at=master&fileviewer=file-view-default

NodeItem
https://bitbucket.org/bwaltz6/flow-builder/src/8c22774c1b59aa381b563f6cf60fb1a5f2b9d39a/dist/nodeItem.js?at=master&fileviewer=file-view-default

I think what I need to do now is add a <ul> tag inside by nodeItem's <li> and make that a drop target. Where I get hung up is, my nodeItems are already both drop targets and drag sources and all I want to do is be able to repeat that inside of a ul ...inside the nodeItem. Not sure how to do that part. Do I need to do some sort of inheritance?

[tamagokun]

Let me whip something up...

[tamagokun]

@3Cbwaltz ok, take a look at this: https://github.com/tamagokun/example-react-dnd-nested

You'll be most interested in app/components/Tree app/components/Item and app/containers/Index to see how everything is setup. I would imagine there could be a lot of enhancements that could be made, but I hope it helps.

[jai1331]

@tamagokun I am facing the nested grouping problem #3343 while dragging the item which is a nested group, the ref.current gives drag item as parent group so I can't find the current item. Can you give your input on this, please