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

问题

What is the correct way to update the values of a particular index.

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 if block it affects the custom directive which in turn allows the elements to move outside the "area" which ideally shouldn't be allowed .

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

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

    }
}

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)">

        {{ existingZone.main }}
        <span>{{existingZone.spans[0]}}</span>
        <span>{{existingZone.spans[1]}}</span>
    </div>

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

        {{ box.dis.dis }}
        <span>{{box.pos[0]}}</span>
        <span>{{box.pos[1]}}</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

Update

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 above given code snippet.

To reproduce the issue

Step1 First comment the elseif block as I have in the above 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

来源：https://stackoverflow.com/questions/57629058/on-updating-the-interpolated-values-of-the-element-affects-the-custom-directive