Как отключить перемещение / перемещение элемента в целевом cdkDropList в Angular 7

Question

У меня есть 2 списка (столицы слева и страны справа). Я хотел бы иметь возможность переместить столицу в список стран и позволить пользователю удалить столицу из страны. Проблема в том, что элементы списка стран начинают перемещаться / сдвигаться (чтобы можно было вводить заглавные буквы). Но я хочу просто поставить сверху и, если это совпадение, предоставить сообщение и удалить город + страну из обоих списков.

Как отключить сортировку или смещение элементов в списке целевых стран, когда я перетаскиваю элемент city над элементами списка стран? 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>

Answer 1

Вы можете добавить правило CSS к классу .cdk-drag-placeholder следующим образом

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

Примечание: это повлияет на список, из которого вы его перетаскиваете, поэтому вы можете захотеть получить большеспецифично для контейнера, в который вы помещаете его

Answer 2

Вы можете попробовать добавить пользовательский перетаскиватель и затем скрыть его (например, display:none).

Добавьте еще один элемент в ваш cdkDrag примерно так:

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

Подсказка: вам может потребоваться сделать это в обоих списках!