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

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

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



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 代码:https://codesandbox.io/s/ozq53zmj6

最佳答案

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

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

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

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

关于javascript - 使用react-beautiful-dnd进行嵌套拖放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52814011/