Angular directive stops working due to else if block value updation

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 is affecting the custom directives

The stackblitz link , https://stackblitz.com/edit/angular-ektmwy?file=src/app/hello.component.ts

The issue is with the way I am trying to pass the top,left positions in the commented code block in the given code snippet.

To reproduce the issue

Step1 First comment the elseif block as I have in the given code snippet in onDragEnd function , and then try moving the existing 301,302 boxes they will be moving within the grey area which is expected.

Step2 Then uncomment the elseif block , now try to move 301, 302 boxes they move out of the grey area

While doing Step1 , we can observe all the boxes 301, 302, 303, 304, 305 can be moved only within grey area

And when Step2 is performed then 303, 304, 305 can be moved only within grey area but 301, 302 can be moved out (which should not be the case) . It should be same as Step1

The dragstart, dragend are @output event emitter present in draggable directive inside draggable folder in stackblitz link

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;


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

    }
}