unable to render the top and left position of the div with cdkdrag #14674
Description
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