The interpolated values get applied to the span text content of all ngfor elements

Question

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

Answer 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:

<div class="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.