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

My requirements call for hiding the cdkDropList until the user starts to drag an item. So when the user starts to drag an item, the drop lists get visible, and they will start to receive them.

I achieve it by setting display none in the CSS as below.

.drop {
display: block;
}


// this makes the drop element display: none until you start dragging (angular adds the class .cdk-drop-list-dragging when drag is started)

.dropnot(.cdk-drop-list-receiving):not(.cdk-drop-list-dragging)) {
display: none;
}


However, this does not work, and the cdkDropList elements will not receive my items.

If I remove display: none; and do instead visibility: hidden; it will work. The problem is that I need it to not take out space in the DOM. (I tried all approaches like position: absolute, and anything that moves/removes the element will prevent this from being dropable once displayed).

Any help is appreciated. Thanks!

Continue reading...