Angular Nested Drag And Drop

Question

I'm trying to build a nested drag and Drop, I have a "root" directory that contains records and directories. Each directory can contain more records, I used CDK Material Drag and Drop for that. I can drag directories and records in the "root" directory, drag records from directory to directory and drag record from the "root" directory to nested directory. but, I can't drag the record from the nested directory to the "root" directory. Please suggest to me how I can solve this issue, link: https://stackblitz.com/edit/directories-nested-drag-and-drop

Answer 1

Interesting, but what an headache. Problem becomes apparent because how they are nested. The records outside of directory are just hanging there and they don't know where they can belong. I would suggest to refactor your data, so that there are no "in-between" elements or you make new category (like a unordered directory) and put the unordered elements there, then the unordered records would know at what level they can move.

Here is my function that does just that:

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);
    }
  }

Working example is here: https://stackblitz.com/edit/directories-nested-drag-and-drop-jzoqcq?file=app%2Fnested-drag-drop.ts