unable to prevent movement of items while dropping in target container

Question

I'm using cdkdragdrop

 <div cdkDropListGroup>

This is my source

 <li *ngFor="let list of List; index as i;">
  <div cdkDropList [cdkDropListData]="List" (cdkDropListDropped)="drop($event,list .Id)" cdkDropListSortingDisabled>
...
</div>
</li>

This is source container

  <tbody cdkDropList [cdkDropListData]="ListData">   
     <tr *ngFor="let list of ListData" cdkDrag (cdkDropListDropped)="dragevt($event)">
        <td> ..... </td> 
     </tr>
    </tbody>
</div>

issue is when i drop items into target div then that container items are not stable and starts to shift for that i tried

.cdk-drag-placeholder {
  display:none !important;
  } 

this fixes the issue but it disturbs the source like when i drag items wrong items is picked.

drop function

 drop(event: CdkDragDrop<string[]>,Id) {
      
        this.datadrag=event.previousContainer.data[event.previousIndex];
         ...
         ..   api call
     
      } 
    
    }

where this.drag contains the drag data

Any solution is highly appreciated

Thanks