Angular 7拖放-动态创建放置区域 [英] Angular 7 Drag and Drop - Dynamically Create Drop Zones

问题描述

是否有一种动态创建放置区的方法?我在使用ngFor和cdkDropList时遇到了一些麻烦.

Is there a way to dynamically create drop zones? I'm having some troubles with ngFor and cdkDropList.

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

Here is my first list and draggable elements:

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

Now, div with class 'conta' is inside of a *ngFor.

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

My problem is, I suppose, with my second list. If I drag an element from second list to list one, it works normally, but if I try to drag element from list one to any instance of list in second list, it can't recognize that the element is being dragged. Demo here:

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

Am I doing something wrong here? The typescript part is working fine.

谢谢

推荐答案

经过一整天的研究，我发现此拉取请求.现在，由于我不知道如何将 cdkDropListGroup 集成到我的示例中，因此我决定创建一个ID数组，该ID数组将添加到 [cdkDropListConnectedTo] 中.

After a full day of research, I found this pull request on Angular CDK repository on Github. Now, since I did not know how to integrate cdkDropListGroup into my example, I decited to create an array of IDs which will be added to [cdkDropListConnectedTo].

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

Each instance of my second list will have generated ID, and that ID will be added to array with suitable prefix (in my second list, on 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属性的每个元素上)

因此，我的数组将如下所示:

So, my array will look like:

• cdk-drop-list-00
• cdk-drop-list-01
• cdk-drop-list-02
• 等

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

Now, I pass that array to [cdkDropListConnectedTo] in my first list:

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

它完美无缺！

希望这将对遇到相同问题的所有人有所帮助.另外，看看我提到的拉取请求，我的解决方案只是一种解决方法，使用 cdkDropListGroup

Hope this will help anybody with the same problem. Also, take a look at the pull request I mentioned, my solution is only a workaround, there is probably a better solution with cdkDropListGroup

这篇关于Angular 7拖放-动态创建放置区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！