在嵌套的拖放区域Angular中拖动Drop

时间:2020-01-03 16:10:48

标签: angular-material angular8 angular-cdk angular-dragdrop

我正在尝试在另一个放置区域内创建放置区域,并且我希望能够在两个放置区域中放置。为此,我尝试使用“ cdkDropListConnectedTo”作为所有放置区域的ID,但是由于某种原因未检测到子放置区域。

stackblitz链接: https://stackblitz.com/edit/drag-drop-inside-another-container?file=app%2Fcdk-drag-drop-connected-sorting-example.html

1 个答案:

答案 0 :(得分:0)

我看到未检测到子区域,因为嵌套的DOM元素不让他触发事件。

您可以这样更改最后一个元素吗?

<div class="example-container">
  <h2>Done</h2>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="todoList"
    class="example-list"
    (cdkDropListDropped)="drop($event)"> 
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>      
 </div>  
  <hello class="example-box" id='child1' [todoList]='todoList'>{{done}}</hello>    
</div>