Changing style.transform property

I am showing some cdkDrag elements in a parent component as bellow:

parent.html:

<app-parent>
@for (item of Items; track item; let index = $index) {
<app-child [id]="index">
</app-child>
}
</app-parent>



child.html:

<div
cdkDrag
class="example-box"
>
<span>Child component!</span>
</div>


Now I want to prevent placing these children elements in some specific areas of the page. Such that if they are dragged to these areas, they be returned back to their previous location. What I have used is:

parent.ts

backToOriginalPlace(index: number, left: number, top: number) {
let child = document.getElementById(index.toString())?.firstChild as HTMLElement;
if (child != null) {
child.style.position = 'absolute';
child.style.left = left + 'px';
child.style.top = top + 'px';
// first try to deactivate transform (didn't work)
child.style.transform = 'none!important';
// second try to deactivate transform (didn't work)
child.style.transform = `translate3d(0, 0, 0)!important`;
}
console.log("child: ", child)
}



Now, if I drag and drop one of the children to a forbidden area, it jumps to a new location different than its previous location (the values of left and top are correct but the location is different). Logging the child, I realized the reason is that the element has a transform: translate3d(x,y,z) property which when I remove it in the inspector, then the element is correctly located in its previous location.

Therefore, I tried to set it either as transform: none!important or as transform: 3d(0,0,0)!important in the code. But non of these two approaches deactivated the transform property of the element and I can see the element's transform property in the inspector. Does any one know where this property come from, or how its values are set and how can I deactivate it?

Continue reading...