drag and drop bug with layout gap

[SantiagoIlli]

Bug Report

What is the expected behavior?

That the layout applies correctly, as it does when there is not a cdkDragPlaceHolder in it.

What is the current behavior?

When you drag an element sometimes the layout is not applied correctly, the elements are not in the expected way. Some of them, usually the drag placeholder, are in a wrong position.

What are the steps to reproduce?

https://stackblitz.com/github/santiagoilli/angular-flex-layout-gap-drag-drop-issue

Take some of the right drag elements, and drag those into the left container. When you have moved a few, add one more and move it in the slot left container, you will now see how one o two of them are not in the expected position, probably the dragPlaceHolder is one of them (the one with opacity).

What is the use-case or motivation for changing an existing behavior?

I need to make a puzzle effect, so the layoutGap would be very usefull.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/core": "~7.2.15"
"@angular/cdk": "^7.3.7"
"@angular/flex-layout": "^7.0.0-beta.24"
"@angular/material": "^7.3.7"
"typescript": "~3.2.2"
Google Chrome Versión 74.0.3729.131 (Build oficial) (64 bits)
Windows 10 Pro 64 bits

Is there anything else we should know?

Sometimes the behaviour is as expected, so try to move a few of the elements and then take one from the right and move around the left container.

[SantiagoIlli]

As a work around i use margin-top in each drag of the left container, and add a placeholder element for the drag, with the same margin-top, and then the element shows fine.