How to disable element shifting/moving in target cdkDropList in Angular 7

Question

I have 2 list (capital cities in the left and countries on the right). I would like to be able to move the capital city on the countries list, and allow the user to drop the capital city on the country. The issue is that the country list elements start moving/shifting (to allow for inserting the capital). But I want just to drop on top and if it is a match, provide a message and remove the city+country from both lists.

How can I disable the sorting or element shifting in target countries list when I am dragging the city element over the country list elements? Thx!

<div cdkDropList
     [cdkDropListData]="capitals"
     #capitalsList="cdkDropList"
     [cdkDropListConnectedTo]="countryList">
  <div cdkDrag
       (cdkDragReleased)="onDragReleased($event)"
       cdkDragBoundary=".row"
       class="bg-info text-center border p-2"
       *ngFor="let capital of capitals">{{ capital }}
  </div>
</div>


<div cdkDropList
     cdkDropListDisabled
     [cdkDropListData]="countries"
     #countryList="cdkDropList"
     [cdkDropListConnectedTo]="capitalsList"
     (cdkDropListDropped)="onDropListDropped($event)">
  <div cdkDrag
       cdkDragDisabled
       class="text-center border p-2"
       *ngFor="let country of countries">{{ country }}
  </div>
</div>

Drawtube

Answer 1

You can add a CSS rule to the .cdk-drag-placeholder class like this

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

Note: This will affect the list you are draggin it from too, so you might want to get more specific to the container you are dropping it into

Tabes

You might need to add !important, because the existing styles on an element could win otherwise. This happened to me e.g. when I had a display: flex element. – Kramlich

Thanks for the solution. Saved my time. – Frightfully

Answer 2

I tried the answer from @Zammy and had an issue where the element didn't show but still displaced space. This solution worked for me by putting this on the source list item

<div *cdkDragPlaceholder style="height: 0px"></div>

Lorsung

Answer 3

You can try adding a custom Drag Placeholder and then hide it (display:none for example).

Add another Element inside your cdkDrag like so:

<div cdkDrag>
  <div *cdkDragPlaceholder style="display: none"></div>
</div>

Hint: You might need to do this in both lists!

Beaux

When I do this, the item getting dragged flies to left most corner first and then drops to the location. @Beaux – Diaphragm