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

Question

我正在使用react-beautiful-dnd创建垂直嵌套拖放。我已经介绍了一些answers in 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

Answer 2

我也遇到了同样的问题，我也使用了 react-beautiful-dnd，但是有很多自定义更改，它可以工作但并不顺利，然后我看到了另一个名为 react-nestable 的包，它可以按我的需要工作.我在下面放了那个包的链接 - react-nestable npm

Answer 3

只需将类型指定为外部和内部可放置对象，在拖曳末端，您必须检查可放置对象的类型，并相应地重新排序。

onDragEnd = ({ type, destination, source }) => {

    if (source && destination && type) {
        let parentId = source.droppableId;
        let srcIndex = source.index;
        let destIndex = destination.index;

        if (type == "Inner") {
            //method for reordering the order of the inner items
            reorderInner(parentId, srcIndex, destIndex)
        }
        else if (type == "Outer") {
            //method for reordering the order of parent items
            reorderOuter(srcIndex,destIndex)
        }
    }

};