Question

除了在列表之间移动项目外，我无法弄清楚如何使用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>

我想将一个项目从第二个列表中拖放到第一个列表中的某个组中，而不是作为第二个列表中的新元素，正如互联网上各处所记录的那样，而是要成为该组的一部分掉进去。

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

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

谢谢。

Answer 1

我得到的最接近的是this stackblitz

我有三个想法

1。-将一个空的div用作cdkDragPlaceholder

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

2.-转换唯一的cdkDropList，我们可以在其中放入许多cdkDropList作为元素。为此，请使用cdkDropListGroup，并将属性cdkDropListSortingDisabled =“ true”添加到每个cdkList。原因是，当我们删除要删除的元素时，还不清楚

3。-具有两个元素列表可以拖动，并使用（cdkDragStarted）（cdkDragEnded）更改样式。拖动时显示为无

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

如何使用Angular的拖放模块将元素拖放到另一个元素上？

1 个答案: