Angular CDK drag and drop wrong drag direction when container rotates

Question

I'm implementing drag and drop on a checkers like game, all working fine ... until the board is rotated then all dnd and implementation is broken: when I drag a piece to the top, the piece goes to bottom, when is dragged to the left, goes to the right.

Sample code of the issue https://stackblitz.com/edit/angular-h3xixz?file=src%2Fstyles.scss

this is the fragment of css who breaks the dnd behavior, but I really need to rotate the board dinamically during the game.

.basic-container {
  padding: 30px;
  transform: rotate(180deg);
}

I don want to discard the @angular/cdk implementation, but maybe I have no choice, I am going nuts.

UPDATE

For more clarity of the issue I'm attaching an example with an animation to rotate the container. I'm already have a workaround for this, which I will share in the answers.

https://stackblitz.com/edit/angular-h3xixz-2t148v

Answer 1

Instead of using transform in CSS, use in HTML like this-

<div class="example-box" cdkDrag>
  <div style="transform:rotate(180deg)">
      Drag me around
  </div>
</div>

In your CSS-

.basic-container {
  padding: 30px;
  
}

Hope this works!

Answer 2

Well, I found a workaround for this, overriding the property style.transform of the native HTML element which is manipulated with Angular CDK Library, basically I changed the sign of the translation for reverting it, multiplying for -1.

My workaround looks something like this:

dragMoved(ev: CdkDragMove) {
  if (this.isRotated) {
    const [origX, origY] = this.elementRef.nativeElement.firstChild.style.transform.match(/-*\d+px/g);
    const newX = parseInt(origX, 10) * -1;
    const newY = parseInt(origY, 10) * -1;

    this.elementRef.nativeElement.firstChild.style.transform = `translate3d(${newX}px, ${newY}px, 0px)`;
  }
}