javascriptreactjsdrag-and-dropnested

Nested Drag and Drop with react-beautiful-dnd

I'm creating vertical nested drag and drop with react-beautiful-dnd. I have referred some answers in github

I have forked from sandbox and created new one for vertical nested drag and drop. When I change the inside DND, outside DND changes the values not inside DND.

enter image description here

CODE

 onDragEnd(result) {
    // dropped outside the list
    console.log("innner drag");
    if (!result.destination) {
      return;
    }

    const items = reorder(
      this.state.items,
      result.source.index,
      result.destination.index
    );

    this.setState({
      items
    });
  }

DEMO Code: https://codesandbox.io/s/ozq53zmj6

Solution

  • react-beautiful-dnd doesn't support nested drag-drop as of now and it's low priority item as per their roadmap. You need to handle everything on outer <DragDropContext onDragEnd={this.handleDragEnd}>. It doesn't give parent information by default in result object, so I have kept that information in child Droppable component. See the below demo if this works for you.

    Code: https://codesandbox.io/s/jp4ow4r45v

    Edit: Refer below sandbox for a more generic code snippet where you will be able to apply nested drag-drop across parent container.

    Code: https://codesandbox.io/s/5v2yvpjn7n