title: A bit complex drag and drop with react-beautiful-dnd
body: <p>I'm using <code>react-beautiful-dnd</code> to create a nested drag and drop.</p>
  <p>In the following example, I can DnD parents and children within parents.</p>
  <p><a href="https://i.stack.imgur.com/18wQG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/18wQG.png" alt="Preview" /></a></p>
  <p><strong>Demo</strong>: <a href="https://codesandbox.io/s/a-bit-complex-react-beautiful-dnd-tusln" rel="nofollow noreferrer">https://codesandbox.io/s/a-bit-complex-react-beautiful-dnd-tusln</a></p>
  <p>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.</p>
  <p><strong>Logic:</strong></p>
  <pre><code>onDragEnd(result) {
  
      const { parents } = this.state;
      const { source, destination, type } = result;
      if (!destination) {
        return;
      }
      if (source.droppableId === destination.droppableId) {
        if (type === &quot;PARENTS&quot;) {
          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 });
      }
    }
  </code></pre>
  <p>How do I approach this? Thank you for your time.</p>