使用 react-beautiful-dnd 进行有点复杂的拖放

时间:2021-06-28 02:14:47

标签: reactjs drag-and-drop react-beautiful-dnd

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

在下面的例子中,我可以免去父母和父母中的孩子。

Preview

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

我正在尝试能够在列表之间,即在列表 1 中,从父级 0 到父级 1 或 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 });
    }
  }

我该如何解决这个问题?感谢您抽出宝贵时间。

0 个答案:

没有答案