react-beautiful-dnd 有点复杂的拖放

Question

我正在使用react-beautiful-dnd 创建嵌套拖放。

在以下示例中，我可以在父母中对父母和孩子进行 DnD。

演示：https://codesandbox.io/s/a-bit-complex-react-beautiful-dnd-tusln

我试图能够在列表之间（即在列表 1 中，从父 0 到父 1 或 2 以及从列表 2 到和从列表 2 中）对子项进行 DnD。

逻辑：

onDragEnd(result) {

    const { parents } = this.state;
    const { source, destination, type } = result;
    if (!destination) {
      return;
    }
    if (source.droppableId === destination.droppableId) {
      if (type === "PARENTS") {
        const _parents = reorder(parents, source.index, destination.index);
        this.setState({ parents: _parents });
      } else {
        const children = reorder(
          parents[parseInt(type, 10)].children,
          source.index,
          destination.index
        );

        const _parents = JSON.parse(JSON.stringify(parents));

        _parents[type].children = children;

        this.setState({ parents: _parents });
      }
    } else {
      const result = move(
        parents[parseInt(type, 10)].children,
        source,
        destination
      );

      this.setState({ parents: result.droppable });
    }
  }

我该如何处理？感谢您的宝贵时间。

Answer 1

https://react-beautiful-dnd.netlify.app/?path=/story/nested-interative-elements--stress-test 从 beautiful-dnd 试试这个。