Drag Top widget when overlapped

[brijeshpankhaniya]

I am using ngx-draggable-widget-kama for drag and Drop . I stuck at one event that drag the top annotation when multiple annotation overlapped.
the issue is tack place when i hover on the annotation at that time I update the widget Property "draggable" to true for active Widget. and set false for all other so only active widget can be Dragged.
here the html and .ts file

<div  *ngFor="let item of bodyJson.rows[commonService.Row]?.cols[commonService.Col].Annotation; let i=index" [style.z-index]="item.useImage ? -1 : null" [(ngWidget)]="item.widgetConfig"
                   (onChange)="enablePlusIframePointerEvent=false" (onChangeStop)="enablePlusIframePointerEvent=true" (onItemChange)="setAnnotationPosition(item,$event)" (onDragStop)="onAnnotationDragStop(item)">
                   <div class="handle"></div>
                   <app-annotation (mouseover)="setPosition(item)" [annotation]="item" [enablePlusIframePevent]="enablePlusIframePointerEvent" (OnViewReplyThread)="onViewReplies($event)" (OnDelete)="deleteAnnotationById($event)" (CreateBlueTick)="onCreateBlueTick($event)" (OnUseImageAsPersp)="changePerspectiveUrl($event)">
                   </app-annotation>
</div>

you can see the plus widget and cross widget separate now I Drag the plus Widget over the cross Widget so cross will be hide. as snippet below.

after Drag is Stop I set Widget Property "draggable" to true.
now I try to Drag the plus widget but the cross widget is Dragged.

which actually behind the plus widget.

.ts File

 public containerConfig: INgWidgetContainerConfig = {
    draggable: true,
    resizable: true,
    margins: [0, 0],
    allow_overlap: true,
    cascade: "Off",
    prefer_new: true,
    col_width: 1,
    row_height: 1,
    fix_to_grid: true,
    maintain_ratio: false,
    min_cols: 1,
    min_rows: 1,
    min_height: 36,
    min_width: 36,
  };

  public widgetConfig: INgWidgetConfig = {
    draggable: true,
    resizable: true,
    sizex: 48,
    sizey: 48,
    row: 1,
    col: 1,
    minCols: 1,
    minRows: 1,
    fixed: true,
  };

setPosition(item){
    this.enablePlusIframePointerEvent=false;
    console.log("current Annotation:",item);
      this.bodyJson.rows[this.commonService.Row].cols[this.commonService.Col].Annotation.forEach((element)=>{
        // element.widgetConfig.dragHandle= element.Guid == item.Guid ? null : ".handle";//adding this class will stop the dragging
        element.widgetConfig.draggable= element.Guid == item.Guid ? true : false;
        if(element.widgetConfig.draggable){
          console.log("selected Annotation:",element.Guid);
         }
      });
  }
 onAnnotationDragStop(item: Annotation) {
    console.log("Drag stop.",item);
    this.bodyJson.rows[this.commonService.Row].cols[this.commonService.Col].Annotation.forEach((element)=>{
      element.widgetConfig.draggable=true;
    });
    setTimeout(() => {
      if (item.Id == 6) {
        if (document.getElementById("s4-workspace")) {
          this.appOffsetWidth =
            document.getElementById("sideNavBox").offsetWidth +
            100 -
            document.getElementById("s4-workspace").scrollLeft;
          this.appOffsetHeight =
            document.getElementById("s4-ribbonrow").offsetHeight +
            document.getElementById("s4-titlerow").offsetHeight +
            document.getElementById("suiteBarTop").offsetHeight +
            155 -
            document.getElementById("s4-workspace").scrollTop;
        }
        item.quadrant = this.getAnnotationQuadrant(
          item.widgetConfig.col + this.appOffsetWidth,
          item.widgetConfig.row + this.appOffsetHeight
        );
      }
    }, 250);
  }

I want to drag plus annotation (Widget). any one can help to figure out the this issue.
thanks in Advance.

[KAMAELUA]

Closed by mistake.