Different level drag and drop with ng2-dragula

41 views Asked by At

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

There are 0 answers