Is there a way to create a sortable tree with react-sortable-hoc or react-beautiful-dnd?

[aliscie]

I'm trying to create a tree of lists where I can reorder the list and also drag elements inside other elements and not only above and ender other elements.

• but the problem is when I use react-sortable-hoc or react-beautiful-dnd I can only reorder the list of elements but I have no idea how to drag elements on another element to make them a child and parent elements.
• In the following example you can I have an element with sub.

  const rows = [
  { text: "Jhon" },
  { text: "alex" },
  { sub: [{ text: "first" }, { text: "second" }] }
  ];

• in this code and box thing can be more clear where I have a tree with draggable elements. codeSandBox

[yuri-scarbaci-lenio]

I am currently implementing about the same thing with this library

basically what you want to do is

• get a tree-model library https://github.com/joaonuno/tree-model-js
• structure your data in a way that makes sense with the tree-model
• create an array out of the items no matter their nest level
• use the array to render out the list with drag and drop, use tree-model to understand the hierarchy