Components: unable to render the top and left position of the div with cdkdrag

Created on 29 Dec 2018 · 7Comments · Source: angular/components

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

```

top = {{top}} left = {{left}}

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>

hai

```

[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?

P3 has pr

Source

anandsunku

Most helpful comment

Glad that it worked out. I've submitted #14696 that adds a proper API for it since I can see this coming up in the future.

crisbeto on 2 Jan 2019

👍2

All 7 comments

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

crisbeto on 29 Dec 2018

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;

/.....
}

anandsunku on 31 Dec 2018

Glad that it worked out. I've submitted #14696 that adds a proper API for it since I can see this coming up in the future.

crisbeto on 2 Jan 2019

👍2

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

yes..having an API is great. By the way after using the animations it works ...but sometimes the elements again jump. and surprisingly after reload of the page it starts working how do i debug the rendering of the jumping behaviour

anandsunku on 10 Jan 2019

@crisbeto, This seems to be sitting in limbo--when can we expect to see this released.
Currently, I set my own transform-translate and must add the values from the prepended translate to get an end value to save to the server. This works fine.

However, after setting my own translate to reposition the element after getting the top and left info from the server, the element skips around when I do initial drags and will only work correctly after refreshing the browser (the same behavior that @anandsunku is experiencing).