角度7拖放 - 动态创建掉落区域

Question

有没有办法动态创建拖放区？我在使用ngFor和cdkDropList时遇到了一些麻烦.

这是我的第一个列表和可拖动元素:

       <div class="subj-container" 
        cdkDropListOrientation="horizontal" 
        cdkDropList 
        #subjectList="cdkDropList"
        [cdkDropListData]="subjects"  
        [cdkDropListConnectedTo]="[lessonList]" 
        (cdkDropListDropped)="drop($event)"
        >
            <div class="subject" *ngFor="let subject of subjects" cdkDrag>
                {{subject.name}}
            </div>
        </div>

这是我的第二个清单:

          <div class="conta" cdkDropList
                #lessonList="cdkDropList"
                [cdkDropListData]="appointment.lessons"
                [cdkDropListConnectedTo]="[subjectList]"
                (cdkDropListDropped)="drop($event)">
                    <div class="sub" cdkDrag *ngFor="let lesson of appointment.lessons">
                        {{lesson.name}}
                </div>
           </div>

现在,带有'conta'类的div在*ngFor中.

我想,我的问题是我的第二个清单.如果我将一个元素从第二个列表拖到列表一,它可以正常工作,但如果我尝试将元素从列表一拖到第二个列表中的任何列表实例,它就无法识别该元素是否被拖动.在这里演示:

我在这里做错了吗？打字稿部分工作正常.

谢谢

Answer 1

经过一整天的研究,我在Github上的Angular CDK存储库中找到了这个拉取请求.现在,因为我不知道如何将cdkDropListGroup集成到我的示例中,所以我决定创建一个ID数组,这些ID将被添加到[cdkDropListConnectedTo]中.

我的第二个列表的每个实例都将生成ID,并且该ID将添加到具有合适前缀的数组中(在我的第二个列表中,在cdkDropList上):

<div cdkDropList
      [attr.id]="addId(i, j)"
      [cdkDropListData]="appointment.lessons"
      [cdkDropListConnectedTo]="[subjectList]"
      (cdkDropListDropped)="drop($event)"
>

addId方法:

addId(i, j) {
    this.LIST_IDS.push('cdk-drop-list-' + i + '' + j);
    return i + '' + j;
}

(cdk-drop-list-是一个ID前缀.CDK将此前缀放在具有cdkDropList属性的每个元素上)

所以,我的数组看起来像:

• CDK-下拉列表-00
• CDK-下拉列表-01
• CDK-下拉列表-02
• 等等

现在,我将该数组传递给我的第一个列表中的[cdkDropListConnectedTo]:

<div class="subj-container" 
    cdkDropListOrientation="horizontal"
    cdkDropList 
    #subjectList="cdkDropList"            
    [cdkDropListData]="subjects" 
    [cdkDropListConnectedTo]="LIST_IDS"
    (cdkDropListDropped)="drop($event)"
>

它完美无瑕!

希望这会帮助任何有同样问题的人.另外,看看我提到的pull请求,我的解决方案只是一个解决方法,cdkDropListGroup可能有更好的解决方案

Answer 2

使用cdkDropListGroup现在可以执行以下操作：

<div cdkDropListGroup>

  <div cdkDropList
    [cdkDropListData]="data"
    (cdkDropListDropped)="drop($event)">
    <div class="row m-2">
        <div *ngFor="let i of data cdkDrag>{{i}}</div>          
    </div>
  </div>

  <div class="subj-container" 
    cdkDropListOrientation="horizontal"
    cdkDropList 
    #subjectList="cdkDropList"            
    [cdkDropListData]="subjects" 
    (cdkDropListDropped)="drop($event)"> 
  </div>

</div>

在这种情况下，不再需要cdkDropListConnectedTo。参见https://github.com/angular/material2/blob/master/src/cdk/drag-drop/drag-drop.md

Answer 3

源链接

演示链接

对于“ 动态拖动n删除列表”，我们可以使用ID代替＃模板变量

app.component.html

<div class="col-md-3" *ngFor="let week of weeks">
  <div class="drag-container">
    <div class="section-heading">Week {{week.id}}</div>

    <div cdkDropList id="{{week.id}}" [cdkDropListData]="week.weeklist"
      [cdkDropListConnectedTo]="connectedTo" class="item-list" (cdkDropListDropped)="drop($event)">
      <div class="item-box" *ngFor="let weekItem of week.weeklist" cdkDrag>Week {{week.id}} {{weekItem}}</div>
    </div>
  </div>
</div>

app.component.ts

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  weeks = [];
  connectedTo = [];


  constructor() {
    this.weeks = [
      {
        id: 'week-1',
        weeklist: [
          "item 1",
          "item 2",
          "item 3",
          "item 4",
          "item 5"
        ]
      }, {
        id: 'week-2',
        weeklist: [
          "item 1",
          "item 2",
          "item 3",
          "item 4",
          "item 5"
        ]
      }, {
        id: 'week-3',
        weeklist: [
          "item 1",
          "item 2",
          "item 3",
          "item 4",
          "item 5"
        ]
      }, {
        id: 'week-4',
        weeklist: [
          "item 1",
          "item 2",
          "item 3",
          "item 4",
          "item 5"
        ]
      },
    ];
    for (let week of this.weeks) {
      this.connectedTo.push(week.id);
    };
  }

  drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      transferArrayItem(event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex);
    }
  }
}

Answer 4

我也不得不面对这个问题。我尝试了 id 方法，但在使用时感觉不太自信。当我在这个 addId() 函数中 console.log 时，我可以看到相同的 id 重复了几次。相反，我尝试使用 @ViewChildren 装饰器来实时获取 cdkList 组件，它对我来说效果很好。

在打字稿中

  cdkDropTrackLists: CdkDropList[];
  @ViewChildren(CdkDropList)
  set cdkDropLists(value: QueryList<CdkDropList>) {
    this.cdkDropTrackLists = value.toArray();
  }

在模板中

<div
        cdkDropList
        class="track-list"
        cdkDropListSortingDisabled
        [cdkDropListData]="paragraphIdentifiers"
        (cdkDropListDropped)="drop($event)"
        [cdkDropListConnectedTo]="cdkDropTrackLists">
</div>

我认为我可以改进它，而 cdkDropLists 作为 QueryList 具有可观察的更改属性。