小编seb*_*med的帖子

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

有没有办法动态创建拖放区?我在使用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>
Run Code Online (Sandbox Code Playgroud)

这是我的第二个清单:

          <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>
Run Code Online (Sandbox Code Playgroud)

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

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

问题演示

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

谢谢

drag-and-drop angular angular-cdk angular7

13
推荐指数
4
解决办法
1万
查看次数

标签 统计

angular ×1

angular-cdk ×1

angular7 ×1

drag-and-drop ×1