I am using ng2 dragula in my angular app. Nested drag and drop is available in my case as follows.
-a
--b
--e
---k
--f
-c
--g
--h
---i
--j
-d
Here we have parent, child and grand child and currently i can drag and drop to same levels like e can be dropped as child pf a or c or d.. likewise grand child also.
Now i need to update like that e can be dragged and dropped as a parent like a or grand child like i.
How can i achieve this?
current code:
if(this.dragulaService.find('parents') === undefined) {
this.dragulaService.createGroup('parents', {
removeOnSpill: false,
moves: function (el, container, handle) {
return handle.classList.contains('parentHandle');
}
});
}
if(this.dragulaService.find('children') === undefined) {
this.dragulaService.createGroup('children', {
removeOnSpill: false,
moves: function (el, container, handle) {
return handle.classList.contains('childHandle');
}
});
}
if(this.dragulaService.find('grandChildren') === undefined) {
this.dragulaService.createGroup('grandChildren', {
removeOnSpill: false
});
}
// Subscribe to the drop event
this.dragulaService.drop('parents').pipe(takeUntil(this.destroyed$)).subscribe(({ el, target, source, sibling }) => {
this.onDrop(el, target, source, sibling);
});
this.dragulaService.drag('parents').pipe(takeUntil(this.destroyed$)).subscribe(({ name, el, source }) => {
this.oldIndex = this.domIndexOf(el, source);
});
this.dragulaService.drop('children').pipe(takeUntil(this.destroyed$)).subscribe(({ el, target, source, sibling }) => {
const targetParentId = +target.parentElement?.id;
const sourceParentId = +source.parentElement?.id;
if (!isNaN(targetParentId) && !isNaN(sourceParentId)) {
this.onDropingChild(sourceParentId, targetParentId, this.oldChildIndex, this.domIndexOf(el, target));
}
});
this.dragulaService.drag('children').pipe(takeUntil(this.destroyed$)).subscribe(({ name, el, source }) => {
this.oldChildIndex = this.domIndexOf(el, source);
});
this.dragulaService.drop('grandChildren').pipe(takeUntil(this.destroyed$)).subscribe(({ el, target, source, sibling }) => {
const targetGrandParentId = +target.parentElement?.parentElement?.parentElement?.id;
const sourceGrandParentId = +source.parentElement?.parentElement?.parentElement?.id;
const targetParentId = +target.parentElement?.parentElement?.id;
const sourceParentId = +source.parentElement?.parentElement?.id;
if (!isNaN(targetGrandParentId) && !isNaN(sourceGrandParentId) && !isNaN(targetParentId) && !isNaN(sourceParentId)) {
this.onDropingGrandChild(sourceGrandParentId, +source.parentElement.id, this.oldGrandChildIndex, targetGrandParentId, +target.parentElement.id, this.domIndexOf(el, target));
}
});
this.dragulaService.drag('grandChildren').pipe(takeUntil(this.destroyed$)).subscribe(({ name, el, source }) => {
this.oldGrandChildIndex = this.domIndexOf(el, source);
});