首页 文章

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

提问于
浏览 次
4

有没有办法动态创建拖放区？我在使用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中 .

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

problem demo

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

谢谢

angular drag-and-drop angular7 angular-cdk

2 回答

  • 3

    经过一整天的研究，我在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-drop-list-00

    • cdk-drop-list-01

    • cdk-drop-list-02

    • 等

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

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

    它完美无瑕！

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

    回复于
  • 1

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

    回复于

相关问题