角度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存储库中找到了this pull请求。现在，因为我不知道如何将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

来源Link

但是z zxswい

对于Dynamic Drag n Drop Lists，我们可以使用ID而不是#Template变量

Link

app.component.html

app.component.ts

<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>