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

Question

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

Как отключить сортировку или смещение элементов в списке целевых стран, когда я перетаскиваю элемент city над элементами списка стран? Спасибо!

<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

Я попробовал ответ от @Zammy, и у меня возникла проблема, когда элемент не отображался, но все еще смещал пространство. Это решение сработало для меня, поместив это в элемент списка источников

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

Answer 3

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

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

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

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