CODEWITHSUNDEEP
angulardrag-and-dropangular-cdk
dev73
dev73

Reputation: 369

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

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>

enter image description here

Upvotes: 11

Views: 10574

Answers (3)

user3311613
user3311613

Reputation: 147

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>

Upvotes: 2

Kenny Togunloju
Kenny Togunloju

Reputation: 189

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

Upvotes: 6

Zammy
Zammy

Reputation: 573

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!

Upvotes: 1

Related Questions