如何使用 Angular Drag and Drop 模块将一个元素拖到另一个元素中？答案

【问题标题】：How to use Angular's Drag and Drop module to drag an element onto another?如何使用 Angular Drag and Drop 模块将一个元素拖到另一个元素中？
【发布时间】：2020-01-10 16:17:30
【问题描述】：

除了在列表之间移动项目之外，我无法弄清楚如何将 Angular 的 Drag and Drop module 用于其他事情。

我有一个项目列表，我想将它们拖到各个组中。顺便说一句，这里涉及到两个列表，一个包含组的列表，一个包含项目的列表。

这是模板代码（完整代码请参阅https://stackblitz.com/edit/angular-xp4um9）：

<div class="container">
  <div class="drop-target"> 
    <mat-selection-list 
      cdkDropList
      #dropTarget="cdkDropList"
      (cdkDropListDropped)="drop($event)"
      [cdkDropListData]="groups"
    >
      <mat-list-option *ngFor="let group of groups" [value]="group.id"
      >
        {{ group.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>

  <div class="drag-source">
    <mat-selection-list 
      cdkDropList
      [cdkDropListConnectedTo]="[dropTarget]"
    >
      <mat-list-option *ngFor="let item of items" [value]="item.id"
        cdkDrag
        [cdkDragData]="item"
      >
        {{ item.name }}
      </mat-list-option>
    </mat-selection-list>
  </div>
</div>

我想从第二个列表中拖动一个项目并将其放到第一个列表中的组中，而不是作为第二个列表的新元素，如 Internet 上随处记录的那样，而是成为该组的一部分掉到了。

我希望能够在 drop() 函数中获取源项和目标组。

另外，当将项目拖到第二个列表上时，如何防止第一个列表缩小，并防止项目出现在组下方（如下图所示）？

谢谢。

【问题讨论】：

标签： angular drag-and-drop

【解决方案1】：

我得到的最封闭的是this stackblitz

我有三个想法

1.-制作一个空的div作为cdkDragPlaceholder

<div class="line" *cdkDragPlaceholder></div>

2.-转换唯一的 cdkDropList，我们可以在其中放入许多 cdkDropList 作为我们拥有的元素。为此，必须使用 cdkDropListGroup，并将属性 cdkDropListSortingDisabled="true" 添加到每个 cdkList。原因是else在我们drop的时候并不清楚你是放在哪个元素中

3.-有两个元素列表可以拖动和使用 (cdkDragStarted) (cdkDragEnded) 将 style.display 更改为无拖动时

.html

<div cdkDropListGroup>
    <div class="example-container">
        <h2>To do</h2>

        <div class="example-list" id="todoList">
            <div *ngFor="let item of todo;let i=index"
        cdkDropList cdkDrag
        cdkDropListSortingDisabled="true" 
        [cdkDragDisabled]="true"
                [cdkDropListConnectedTo]="[doneList]" 
                (cdkDropListDropped)="drop($event,i)" class="example-box"
        >{{item}}</div>
        </div>
    </div>

    <div class="example-container">
        <h2>Done</h2>
        <div>
            <div [style.display]="onDrag?'none':''" cdkDropList id="doneList" 
                 [cdkDropListData]="done"
                  class="example-list" (cdkDropListDropped)="drop($event)">
                <div class="example-box" *ngFor="let item of done" 
           cdkDrag 
          (cdkDragStarted)="onDrag=true"
                    (cdkDragEnded)="onDrag=false">
          {{item}}
                    <div class="line" *cdkDragPlaceholder></div>
                </div>
            </div>
        </div>
        <div class="background" *ngIf="onDrag">
            <div class="example-list">
                <div class="example-box" *ngFor="let item of done">{{item}}
                </div>
            </div>
        </div>
    </div>
</div>

和drop函数一样

  drop(event: CdkDragDrop<string[]>,index:number) {
      console.log(event.previousContainer.data[event.previousIndex],
                  '-->',
                  this.todo[index]);
  }

【讨论】：