angular12使用ng2-dragula拖动表格树只可同级拖动

• 需求: 实现可配置三级菜单,只可拖动同级菜单  效果如下:
  

• 1. 首先在Module中注入对应服务

• import { DragulaModule,DragulaService } from 'ng2-dragula';
  
    imports: [
          DragulaModule, 
      ],
    providers:[
          DragulaService
      ]

•  2. 在使用此组件ts中引入dragula的操作服务用于检测拖动的数据

• import { DragulaService } from "ng2-dragula";
  
  constructor(private dragulaService: DragulaService) { }
  
   ngOnInit(): void {
          this.dragulaService.createGroup('HANDLES', {
              copy: (el, source) => {   //开始拖动
                  return false;
              },
              accepts: (el, target: any, source: any, sibling: any) => {   //拖动结束
                  return target.id == source.id;
              }
          });
    }

  3. 在html 中 写出树 (需求是只支持三级树 第一次实现)

• 注意 每一层div中 需写一个唯一标识的 id 用于区分 拖动的层级 

•  <t-table [data]="[{}]" [scrollable]="true" scrollHeight="800px">
          <ng-template tTemplate="header">
              <tr>
                  <th style="width: 40px;text-align: center;">#</th>
                  <th class="th">菜单名称</th>
                  <th class="th">URI</th>
                  <th style="width: 100px;">操作</th>
              </tr>
          </ng-template>
          <ng-template tTemplate="body">
              <div class="menu_config ui-table-tbody" dragula="HANDLES" [(dragulaModel)]="vampires" id="一级">
                  <div *ngFor="let menu of vampires" class="tr">
                      <td class="drag">
                          <span class="icon-numberlist">
                          </span>
                      </td>
                      <td class="td">
                          <div class="menu_config_a">
                              <span *ngIf="menu.hasOwnProperty('open')" class="open">
                                  <span class="icon-paginato-right" *ngIf="!menu.open" (click)="menu.open = true"></span>
                                  <span class="icon-down" *ngIf="menu.open" (click)="menu.open = false"></span>
                              </span>
                              <span *ngIf="!menu.hasOwnProperty('open')" class="blankMemo"></span>
                              <span class="label-success"><span class="menu_icon"
                                      [ngClass]="[menu?.icon]"></span>一级菜单</span>
                              <span class="label" (click)="edit(menu)">{{ menu['label'] }}</span>
                          </div>
                      </td>
                      <td class="td">
                          <div class="uri">
                              <span>{{ menu['uri'] }}</span>
                          </div>
                      </td>
                      <td style="width: 100px;" class="tx-center">
                          <a tTooltip="编辑" tooltipPosition="bottom" title="编辑" class="ui-tablea" (click)="edit(menu)">
                              <span class="icon-editorial-team"></span>
                          </a>
                          <a tTooltip="删除" tooltipPosition="bottom" class="ui-tablea">
                              <span class="icon-delete3" (click)="deleteSpecialData(menu)"></span>
                          </a>
                      </td>
                      <div dragula="HANDLES" [(dragulaModel)]="menu['children']" [id]="menu['uri']" *ngIf="menu.open">
                          <div *ngFor="let menu1 of menu['children']" class="tr">
                              <td class="drag">
                                  <span class="icon-numberlist">
                                  </span>
                              </td>
  
                              <td class="td">
                                  <div class="menu_config_leavn">
                                      <span *ngIf="menu1.hasOwnProperty('open')" class="open">
                                          <span class="icon-paginato-right" *ngIf="!menu1.open"
                                              (click)="menu1.open = true"></span>
                                          <span class="icon-down" *ngIf="menu1.open" (click)="menu1.open = false"></span>
                                      </span>
                                      <span *ngIf="!menu1.hasOwnProperty('open')" class="blankMemo"></span>
                                      <span class="label-leavn"><span class="menu_icon"
                                              [ngClass]="[menu1?.icon]"></span>二级菜单</span>
                                      <span class="label" (click)="edit(menu1)">{{ menu1['label'] }}</span>
                                  </div>
                              </td>
                              <td class="td">
                                  <div class="uri">
                                      <span>{{ menu1['uri'] }}</span>
                                  </div>
                              </td>
                              <td style="width: 100px;" class="tx-center">
                                  <a tTooltip="编辑" tooltipPosition="bottom" title="编辑" class="ui-tablea"
                                      (click)="edit(menu1)">
                                      <span class="icon-editorial-team"></span>
                                  </a>
                                  <a tTooltip="删除" tooltipPosition="bottom" class="ui-tablea"
                                      (click)="deleteSpecialData(menu1)">
                                      <span class="icon-delete3"></span>
                                  </a>
                              </td>
                              <div dragula="HANDLES" [(dragulaModel)]="menu1['children']" [id]="menu1['uri']"
                                  *ngIf="menu1.open">
                                  <div *ngFor="let menu2 of menu1['children']" class="tr">
                                      <td class="drag">
                                          <span class="icon-numberlist">
                                          </span>
                                      </td>
                                      <td class="td">
                                          <div class="menu_config_iii">
                                              <span class="label-iii">
                                                  <span class="menu_icon" [ngClass]="[menu2?.icon]"></span>三级菜单</span>
                                              <span class="label" (click)="edit(menu2)">{{ menu2['label'] }}</span>
                                          </div>
  
                                      </td>
                                      <td class="td">
                                          <div class="uri">
                                              <span>{{ menu2['uri'] }}</span>
                                          </div>
                                      </td>
                                      <td style="width: 100px;" class="tx-center">
                                          <a tTooltip="编辑" tooltipPosition="bottom" title="编辑" class="ui-tablea"
                                              (click)="edit(menu2)">
                                              <span class="icon-editorial-team"></span>
                                          </a>
                                          <a tTooltip="删除" tooltipPosition="bottom" class="ui-tablea"
                                              (click)="deleteSpecialData(menu2)">
                                              <span class="icon-delete3"></span>
                                          </a>
                                      </td>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </ng-template>
      </t-table>