拖放 - 合并行 - Angular

Question

我实现了一个三层文件夹结构，类似于 Angular 项目中的层次结构，并尝试在该文件夹结构上实现拖放，以便在拖放时将它们合并。

我试过添加 HTML 拖放 APi，但这无助于理想地合并拖放文件夹的内容。

<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

我能够使用 Angular 2 无依赖性拖放来实现此目的。(https://github.com/akserg/ng2-dnd)

它具有可拖放指令来复制本机 HTML DnD API 以及限制拖放区域和允许拖放功能的回调函数

<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>

拖放 - 合并行 - Angular

Drag & Drop - Merge Rows on Drop - Angular

html

jquery

drag-and-drop

angular