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
1
-
Please provide enough code so others can better understand or reproduce the problem.Community– Community Bot2022-02-16 11:19:16 +00:00Commented Feb 16, 2022 at 11:19
Add a comment
|
1 Answer
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
Comments
