The Interpolated Values Get Applied To The Span Text Content Of All Ngfor Elements

I am retrieving the moved element top and left values and displaying it within the element, the issue is the top, left values of the current moved element modifies the span text to

Solution 1:

The problem is that you are binding to a property that is for the entire scope of the page.

<span>{{left}}</span>

Instead, I'd make existingDroppedItemZoneIn a type with properties:

existingDroppedItemZoneIn[]: DropBox[] = new {[
   {left:0, top:0},
   {left:20, top: 0}
]};

And then you would want to bind to each box's attributes:

<divclass="box" *ngFor="let box of dropzone1">
   {{ box.dis }}
   <span>{{box.left}}</span><span>{{box.top}}</span></div>

And this is a quick pseudo-code example. So it likely isn't perfect.