cdkDrag inside drop list doesn't preserve `transform` value

[anirudhvarma12]

What are you trying to do?

I am trying to absolutely position draggable elements inside a drop container using transform. Something like -

<div [style.transform]="transformString" cdkDrag>...</div>

Before upgrading to cdk v9, this worked perfectly. However, after upgrading, it seems like the transform style is overwritten by the CDK.

What troubleshooting steps have you tried?

After some digging, it seems like this code is performing the reset.

I tried using cdkDragFreeDragPosition, but that only works in the absence of a drop container.

It also seems like this PR, should fix the issue?

Is there any other recommended way of setting this?

What are you seeing that does not match your expectations?

Reproduction

N/A

Environment

• Angular: 9.1.4
• CDK/Material: 9.2.4
• Browser(s): Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS Catalina

[crisbeto]

I don't think we ever had special handling for this so if it worked before, it was probably by accident. I definitely think that we should fix it, but #18145 isn't the way to go, because it only applies to drag items that are outside of a list. I think that the easiest workaround until we fix it on our end is to apply your transform on a child element inside the cdkDrag. E.g.

<div cdkDrag>
  <div style="transform: ..."></div>
</div>

[anirudhvarma12]

@crisbeto , yeah, I ended up doing something similar. Thanks!

[anirudhvarma12]

@crisbeto , also, if you (or anyone) could give me some pointers, I would be interested in taking a shot at fixing it.