javascript - 使用 react-beautiful-dnd 嵌套拖放

Question

我正在使用 react-beautiful-dnd 创建垂直嵌套拖放。我提到了一些 answers in github

我从沙箱中 fork 出来，并为垂直嵌套拖放创建了一个新沙箱。 当我更改内部 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 中默认不提供 parent 信息对象，所以我将这些信息保存在 child 中 Droppable零件。如果适合您，请参阅下面的演示。

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

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

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