Drag and drop with Angular CDK - Keep items in position after page refresh

Question

I’m doing an angled drag & drop, but one of the rules I need in the application is that the item stays in the same place after the page is reloaded. Something more or less like the image.

HTML code:

<div
  #pieElement
  *ngIf="equipment"
  cdkDragBoundary=".content"
  cdkDrag
  (cdkDragEnded)="dragEnd($event)"
  (cdkDragEntered)="dragEnter($event)"
  [chart]="pie"
  [ngClass]="active ? 'pie' : 'pie-inactive'"
  [style.transform]="transform"
></div>

On the controller startup:

ngOnInit() {
    ...
    this.transform = "";
        this.transform = localStorage.getItem(`${this.serialnumber}`);
    ...
}

Funcão Dragend:

dragEnd(event: CdkDragEnd) {
    let position = event.source.element.nativeElement.style.transform;

    localStorage.setItem(`${this.serialnumber}`, position);
  }

How can I develop this Feature? Every time the dragend function is called, because of the angular CDK, a new Transform is set to the element.

Answer 1

Matheus, as a suggestion, instead of changing the .style.transform use the property cdkDragFreeDragPosition. See the example below:

import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import {CdkDragEnd, CdkDragEnter} from '@angular/cdk/drag-drop';

@Component({
  selector: 'cdk-drag-drop-free-drag-position-example',
  templateUrl: 'cdk-drag-drop-free-drag-position-example.html',
  styleUrls: ['cdk-drag-drop-free-drag-position-example.css'],
})
export class CdkDragDropFreeDragPositionExample implements OnInit {
  dragPosition = { x: 0, y: 0 };

  ngOnInit() {
    const pos = localStorage.getItem('translate3d');
    if (pos) {
      const position = JSON.parse(pos);
      this.dragPosition.x = position.x;
      this.dragPosition.y = position.y;
    }
  }

  dragEnd(event: CdkDragEnd) {
    const transform = event.source.element.nativeElement.style.transform;
    const positions = transform.replace('translate3d(', '')
      .split(',')
      .map(a => parseInt(a.replace(/[^\-0-9]+/g, '')));
    localStorage.setItem('translate3d', JSON.stringify({ x: positions[0], y: positions[1] }));
  }
}

Template:

<div 
  class="example-box"
  #pieElement
  cdkDrag
  [cdkDragFreeDragPosition]="dragPosition"
  (cdkDragEnded)="dragEnd($event)">
  Drag me around
</div>