使用react-beautiful-dnd进行嵌套拖放

Question

我正在使用react-beautiful-dnd创建垂直嵌套拖放。我已经在github中提到了一些答案

我已经从沙箱中分叉，并为垂直嵌套拖放创建了一个新的沙箱。当我更改内部DND时，外部DND更改的值不在内部DND中。

码

 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
    });
  }

演示代码：https : //codesandbox.io/s/ozq53zmj6

Answer 1

react-beautiful-dnd目前不支持嵌套拖放，根据其路线图，它是优先级较低的项目。您需要处理外部事务<DragDropContext onDragEnd={this.handleDragEnd}>。默认情况下，它不会在result对象中提供父信息，因此我将该信息保留在子Droppable组件中。如果适合您，请参见下面的演示。

代码：https：//codesandbox.io/s/jp4ow4r45v

编辑：请参阅沙箱下方，获取更通用的代码段，您可以在其中跨父容器应用嵌套拖放。

代码：https：//codesandbox.io/s/5v2yvpjn7n