1

I'm using react-beautiful-dnd to create a nested drag and drop.

In the following example, I can DnD parents and children within parents.

Preview

Demo: https://codesandbox.io/s/a-bit-complex-react-beautiful-dnd-tusln

I'm trying to be able to DnD children between lists i.e. in List 1, from parent 0 to parent 1 or 2 and also to and from List 2.

Logic:

onDragEnd(result) {

    const { parents } = this.state;
    const { source, destination, type } = result;
    if (!destination) {
      return;
    }
    if (source.droppableId === destination.droppableId) {
      if (type === "PARENTS") {
        const _parents = reorder(parents, source.index, destination.index);
        this.setState({ parents: _parents });
      } else {
        const children = reorder(
          parents[parseInt(type, 10)].children,
          source.index,
          destination.index
        );

        const _parents = JSON.parse(JSON.stringify(parents));

        _parents[type].children = children;

        this.setState({ parents: _parents });
      }
    } else {
      const result = move(
        parents[parseInt(type, 10)].children,
        source,
        destination
      );

      this.setState({ parents: result.droppable });
    }
  }

How do I approach this? Thank you for your time.

anonym
  • 4,460
  • 12
  • 45
  • 75
  • Have you found any solution for this nested senario – Syed Muhammad Moiz May 04 '23 at 14:04
  • turns out there is no solution to a nested scenario where we can dnd a child to the parent droppable and from parent droppable to a child vice versa react-beautiful-dnd does not support this,people tried to achieve this manually but failed.I found an alternative solution by making virtual list using vtree package and applying the react-beautiful-dnd on it.The virtual list considers the parent and the children at the same level so the dnd handles it as one droppable,but you have to handle some scenarios manually in this solution to achieve a perfect child to parent dnd using react-beautiful-dnd – Syed Muhammad Moiz May 11 '23 at 15:44

1 Answers1

-1

https://react-beautiful-dnd.netlify.app/?path=/story/nested-interative-elements--stress-test try this out from beautiful-dnd.

dude_blag
  • 135
  • 1
  • 4
  • 14