unable to render the top and left position of the div with cdkdrag #14674

anandsunku · 2018-12-29T14:20:40Z

What is the expected behavior?

i am trying to store and restore the position of the div over sessions using local storage.

What is the current behavior?

after rendering the elements with stored left.px and top.px the elements are jumping.

` ngOnInit() {
let temp: any[] = [];
let tempstr = '';

tempstr = localStorage.getItem('things');
temp = JSON.parse(tempstr);
console.log(temp);
if (!temp) {
  this.things.push(
    {
      text: 'first thing',
      id: 10, top: 100, left: 50,
      items: ['things like that '],
    });
  this.things.push({text: 'second thing', id: 20, top: 400, left: 200});
  this.things.push({text: 'third ', id: 30, top: 400, left: 200});
  this.things.push({text: 'fourth', id: 40, top: 400, left: 200});
  this.things.push({text: 'fifth', id: 50, top: 400, left: 200});
  this.things.push({text: 'sixth', id: 60, top: 400, left: 200});
} else {
  this.things = temp;
}
console.log(this.things);

}`


  onDragEnd(event: CdkDragEnd, id) {
    this.dirty = true;

    console.log('drag end');
    this.things.forEach( thing => {
      if (thing.id === id) {
        //--> problematic code next 2 lines <---
        thing.top = event.source.element.nativeElement.getBoundingClientRect().top;
        thing.left = event.source.element.nativeElement.getBoundingClientRect().left;

        localStorage.setItem('things', JSON.stringify(this.things));
      }
    });
  }


<body>
<mat-toolbar color="primary">{{title}}</mat-toolbar>

<div>
  top = {{top}}
  left = {{left}}
</div>

  <div
    class="example-box" cdkDrag
    *ngFor="let thing of things"
    (cdkDragEnded)="onDragEnd($event, thing.id)"
    (cdkDragMoved)="onDragMoved($event, thing.id)"
     [ngStyle]="{'top.px':thing.top, 'left.px':thing.left}">

    <div style="background-color: #3748ac;color: white; width: 100%;height: 50px; padding-left: 10px">
      <span style="padding-left: 10px;padding-right: 10px;padding-top: 20px;vertical-align: middle;display: inline-block;line-height: normal;">{{thing.text}}</span>
    </div>
    <div>
      <p>thing.top = {{thing.top}} <br>thing.left = {{thing.left}}</p>
    </div>
    <div style="width: 80%;">
      <ul>
        <li *ngFor="let item of thing.items">{{item}}</li>
      </ul>
    </div>
  </div>

  <div class="example-box" cdkDrag>
    hai
  </div>

</body>
</html>

[ngStyle]="{'top.px':thing.top, 'left.px':thing.left}">

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

The text was updated successfully, but these errors were encountered:

crisbeto · 2018-12-29T15:36:21Z

The CDK uses transform to move the element around. You should be able to restore its position by setting style="transform: translate3d({{left}}, {{top}})".

anandsunku · 2018-12-31T14:06:36Z

Wow that works... thanks a lot!
But i had to subtract the offset top to make it sit exactly in that location, is that ok to do it?

onDragEnd(event: CdkDragEnd, id) {
/.......

div's .top = event.source.element.nativeElement.getBoundingClientRect().top - 
 event.source.element.nativeElement.offsetTop;

/.....
}