angular - 角度嵌套拖放

Question

我正在尝试构建一个嵌套的拖放，我有一个包含记录和目录的“根”目录。每个目录可以包含更多记录，为此我使用了 CDK Material Drag and Drop。我可以拖动“根”目录中的目录和记录，将记录从目录拖到目录，将记录从“根”目录拖到嵌套目录。但是，我无法将记录从嵌套目录拖到“根”目录。请向我建议如何解决此问题，链接：https ://stackblitz.com/edit/directories-nested-drag-and-drop

Answer 1

很有趣，但是很头疼。问题变得很明显，因为它们是如何嵌套的。records外面只是挂在directory那里，他们不知道他们可以属于哪里。我建议重构您的数据，以便没有“中间”元素，或者您创建新类别（如无序目录）并将无序元素放在那里，然后无序records者会知道他们可以移动的级别。

这是我的功能：

ngOnInit(): void {
    this.reformatRoot();
    this.connecteList.push(this.myRoot['id'].toString());
    this.myRoot['children'].forEach((sub) => {
      this.connecteList.push(sub['id'].toString());
      if (sub['type'] === 'directory') {
        sub['children'].forEach((child) => {
          this.connecteList.push(child['id'].toString());
        });
      }
    });
  }

  reformatRoot() {
    // Get the odd records out
    let unorderedItems: any[] = [];
    for (let item of this.myRoot.children) {
      if (!item.children) {
        this.myRoot.children.splice(this.myRoot.children.indexOf(item), 1);
        unorderedItems.push(item);
      }
    }

    // Create new directory and put the odd records in there
    if (unorderedItems.length > 0) {
      const directoryIds = this.myRoot.children.map((object) => {
        return object.id;
      });
      const nextId: number = Math.max(...directoryIds) + 1;
      const newDirectory = {
        id: nextId,
        type: 'directory',
        name: 'unordered items ' + nextId,
        children: unorderedItems,
      };
      this.myRoot.children.push(newDirectory);
    }
  }

工作示例在这里：https ://stackblitz.com/edit/directories-nested-drag-and-drop-jzoqcq?file=app%2Fnested-drag-drop.ts