I'm have an issue trying to move an item to a cdkDropList which i change from display : none to display : block.

I have two lists - the #firsstList allows elements to be moved to #secondList but not the other way so I have elements moving in one direction only.

Both lists are different angular components in different names router outlets.

The #firstList used the id of #secondList to identify which container it is connected to.

The #secondList html element display property changes when a cdkDrag item from the first list triggers cdkDragStarted.

The drop event in #secondList isn't being triggered on the first drag event from #firstList,

A similar question has already been asked here:

Angular Drag and Drop - DropList that was display none, will not recieve items even after setting to display block

I'm trying to avoid manipulating the height and width properties of the #secondList. Thanks to anyone who can help - I've been trying everything for the last 24 hours.

#firstList component

<table
  #firstList="cdkDropList"
  cdkDropList
  [cdkDropListData]="dataSource.data"
  [cdkDropListConnectedTo]="['secondList']"
  mat-table
  [dataSource]="dataSource"
  class="mat-elevation-z8">
 <tr
    cdkDrag
    [cdkDragData]="row"
    (cdkDragStarted)="dragStarted($event)"
    (contextmenu)="onRightClick($event)"
    mat-row
    *matRowDef="let row; columns: displayedColumns"
    (click)="handleClick(row)"></tr>
</table>

#secondList component

<div
  #secondList="cdkDropList"
  [cdkDropListData]="files"
  cdkDropList
  class="box"
  (cdkDropListDropped)="drop($event)">
  @for (file of files; track file.s3_key) {
    <div cdkDrag>{{ file.s3_key }}</div>
  }
</div>

html where i change the display property dynamically:

             <div
    [style.display]="(explorer.showDropZone$ | async) ? 'block' : 'none'"
    class="drop-zone-container">
 <glx-drop-zone></glx-drop-zone>
    </div>```

I'm have an issue trying to move an item to a cdkDropList which i change from display : none to display : block.

I have two lists - the #firsstList allows elements to be moved to #secondList but not the other way so I have elements moving in one direction only.

Both lists are different angular components in different names router outlets.

The #firstList used the id of #secondList to identify which container it is connected to.

The #secondList html element display property changes when a cdkDrag item from the first list triggers cdkDragStarted.

The drop event in #secondList isn't being triggered on the first drag event from #firstList,

A similar question has already been asked here:

Angular Drag and Drop - DropList that was display none, will not recieve items even after setting to display block

I'm trying to avoid manipulating the height and width properties of the #secondList. Thanks to anyone who can help - I've been trying everything for the last 24 hours.

#firstList component

<table
  #firstList="cdkDropList"
  cdkDropList
  [cdkDropListData]="dataSource.data"
  [cdkDropListConnectedTo]="['secondList']"
  mat-table
  [dataSource]="dataSource"
  class="mat-elevation-z8">
 <tr
    cdkDrag
    [cdkDragData]="row"
    (cdkDragStarted)="dragStarted($event)"
    (contextmenu)="onRightClick($event)"
    mat-row
    *matRowDef="let row; columns: displayedColumns"
    (click)="handleClick(row)"></tr>
</table>

#secondList component

<div
  #secondList="cdkDropList"
  [cdkDropListData]="files"
  cdkDropList
  class="box"
  (cdkDropListDropped)="drop($event)">
  @for (file of files; track file.s3_key) {
    <div cdkDrag>{{ file.s3_key }}</div>
  }
</div>

html where i change the display property dynamically:

             <div
    [style.display]="(explorer.showDropZone$ | async) ? 'block' : 'none'"
    class="drop-zone-container">
 <glx-drop-zone></glx-drop-zone>
    </div>```

• css
• angularjs
• drag-and-drop
• angular-cdk-drag-drop

1 Answer 1

For anyone interested, I just found a solution, I placed #secondList into a table element:

and added the css decorator visibility: visible / collapse

<table>
  <tr>
    <td>
      <secondListComponent></>
    </td>
  </tr>
</table>

according to mozilla:

For rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present.