拖放 - 拖放时合并行 - Angular答案

【问题标题】：Drag & Drop - Merge Rows on Drop - Angular拖放 - 拖放时合并行 - Angular
【发布时间】：2021-01-18 05:41:20
【问题描述】：

我实现了一个三层文件夹结构，以类似于 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>

【问题讨论】：

标签： html jquery angular drag-and-drop

【解决方案1】：

我能够使用 Angular 2 Drag-and-Drop 实现这一点，而无需依赖。(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>

【讨论】：