On updating the interpolated values of the element affects the custom directive applied on it

I have custom drag and drop and a "area" within within which the elements can be dragged and dropped and moved inside that "area" =>the div having class dropzone.

I also want to interpolate the current x and y positions of the element being moved within the the "area".

I calculate the positions and I want to update the interpolated values to the latest one in the below code.

But when I update the values using the if/else block it affects the custom directive which in turn allows the elements to move outside the "area" which ideally it doesn't allow .

I have commented out the if/else block and tried the directives work as expected but when I uncomment the if/else block the custom directives doesn't respond and my elements start moving out of the "area"

onDragEnd(event){

    const movingBlockIndex = (this.dropzone1.indexOf(this.currentBox));
    const existingMovingBlockIndex = (this.existingDroppedItemZoneIn.indexOf(this.currentBox));
    if(movingBlockIndex>-1 || existingMovingBlockIndex>-1){

        console.log(`got drag end x and y ${event.clientX} ${event.clientY}`)

        const container_rect = this.parentparent.nativeElement.getBoundingClientRect();
        this.mouse.x = event.clientX - container_rect.left;
        this.mouse.y = event.clientY - container_rect.top;

        const{width,height} = this.parentparent.nativeElement.getBoundingClientRect();
        const perc_x = this.mouse.x / width * 100;
        const perc_y = this.mouse.y / height * 100;

        this.left = perc_x;
        this.topLeft = []
        this.topLeft.push(this.left);

        this.top = perc_y;
        this.topLeft.push(this.top);

    /*if(movingBlockIndex > -1){
        this.dropzone1[movingBlockIndex].pos[0] = (perc_x);
        this.dropzone1[movingBlockIndex].pos[1] = (perc_y);
    }else if(existingMovingBlockIndex > -1){     
        this.existingDroppedItemZoneIn[existingMovingBlockIndex].spans[0] = (perc_x);
        this.existingDroppedItemZoneIn[existingMovingBlockIndex].spans[1] = (perc_y);
    }*/

    }
}

Html

<div  #parentparent [ngStyle]="{'height':'100%'}">
  <div id="toget"
        class="dropzone"
        appMovableArea appDropzone
       (drop)="move(currentBox, dropzone1)">

    <div class="box"
         appMovable appDroppable
         *ngFor="let existingZone of existingDroppedItemZoneIn"
         [ngStyle] = "{'position': 'absolute', 
                      'top.%':existingZone.spans[1], 
                      'left.%':existingZone.spans[0]}" 
        (dragStart)="currentBox = existingZone" 
        (dragEnd)="onDragEnd($event,existingZone)">

        
        <span></span>
        <span></span>
    </div>

    <div class="box"
         *ngFor="let box of dropzone1"
          appMovable appDroppable
          (dragStart)="currentBox = box" 
          (dragEnd)="onDragEnd($event,box)">

        
        <span></span>
        <span></span>
     </div>

   </div>
</div>

Objective is to update the span interpolated values of only the current element being moved using the index of that element, what is the correct way to update the interpolated values as going by this approach of using if/else if block inside if block is affecting the custom directives