Drag & Drop - Merge Rows on Drop - Angular

Question

I've a three level folder structure implemented to resemble hierarchical levels in a Angular Project and trying to achieve drag & drop on this folder structure to merge them on dragging & dropping onto each other.

I've tried adding HTML Drag & Drop APi's but that doesn't help in merging the content of dropped folder ideally.

<table class="table table-bordered table-striped">
    <ng-container *ngFor="let content of contents">
          <tr class="top-row">
             <td class="parent"><i id="parentFolder" class="fa fa-folder-open"></i>{{content.title}}</td>
           </tr>
       <ng-container *ngFor="let subFolder of contents['subfolder']">
           <tr class="object-row">
             <td class="child"><i id="childFolder" class="fa fa-folder-open"></i>{{subFolder.title}}</td>
            </tr>
            <tr *ngFor="let product of subfolder['innerFolder']">
              <td class="secondchild"><i class="fa fa-folder"></i>{{product.title}}</td>
            </tr>
       </ng-container>
    </ng-container>
</table>

Answer 1

I was able to achieve this using Angular 2 Drag-and-Drop without dependencies.(https://github.com/akserg/ng2-dnd)

it has draggable & droppable directives to replicate the native HTML DnD APIs as well as restricting drop zones as well as callback functions to allow the drop functions

<table class="table table-bordered table-striped">
    <ng-container *ngFor="let content of contents">
          <tr class="top-row">
             <td class="parent"><i id="parentFolder" class="fa fa-folder-open"></i>{{content.title}}</td>
           </tr>
       <ng-container *ngFor="let subFolder of contents['subfolder']">
           <tr class="object-row" ***dnd-draggable [dragEnabled]="true"***>
             <td class="child"  **dnd-droppable (onDropSuccess)="simpleDrop=$event"**><i id="childFolder" class="fa fa-folder-open"></i>{{subFolder.title}}</td>
            </tr>
            <tr *ngFor="let product of subfolder['innerFolder']">
              <td class="secondchild"><i class="fa fa-folder"></i>{{product.title}}</td>
            </tr>
       </ng-container>
    </ng-container>
</table>