2

Estou fazendo um drag & drop com angular, mas uma das regras que preciso na aplicação é que o item continue no mesmo local após a página ser recarregada. Algo mais ou menos como a imagem. inserir a descrição da imagem aqui

Código HTML:

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

Na inicialização do controller:

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);
  }

Como consigo desenvolver essa feature? Toda vez que a função dragEnd é chamada, por conta do CDK do angular, um novo transform é setado para o elemento.

1 Resposta 1

2

Matheus, como sugestão, ao invés de alterar o .style.transform utilize a propriedade cdkDragFreeDragPosition. Veja o exemplo abaixo:

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>
4
  • Estou tentando implementar sua sugestão, mas ao colocar o Input [cdkDragFreeDragPosition] . Tenho esse erro no console: Template parse errors: Can't bind to 'cdkDragFreeDragPosition' since it isn't a known property of 'div'. (" Commented 10/10/2019 às 17:26
  • @MatheusBernardi agora eu não sei hem! Você chegou a importar no módulo do seu componente a referência import {DragDropModule} from '@angular/cdk/drag-drop';? essa propriedade está listada da documentação mesmo e lá eles dão um exemplo de como utilizá-la: stackblitz.com/angular/aejyednlgvk?file=.angular-cli.json Tenta verificar a versão por favor. Este código rodei com a @angular\cdk 8.2.1 Commented 10/10/2019 às 17:40
  • Funcionou! Atualizei minha versão do angular e consegui utilizar o cdk Commented 10/10/2019 às 18:20
  • Segundo o arquivo package.json do repositório do CDK a versão 8.2.x depende do Angular 8.2.x da mesma forma que o 9 do CDK depende do Angular 9. Commented 10/10/2019 às 18:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .