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

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

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

<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>

введите описание изображения здесь


angular drag-and-drop angular-cdk
person dev73    schedule 02.01.2019    source источник

Ответы (3)


arrow_upward
4
arrow_downward

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

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

Примечание: это повлияет и на список, из которого вы его перетаскиваете, поэтому вы можете более точно указать контейнер, в который вы его перетаскиваете.

person Kenny Togunloju    schedule 20.06.2019
comment
Возможно, вам потребуется добавить !important, потому что в противном случае могут выиграть существующие стили для элемента. Это случилось со мной, например. когда у меня был элемент display: flex. - person bersling; 07.07.2020
comment
Спасибо за решение. Сэкономил мое время. - person Rahul; 05.06.2021

arrow_upward
1
arrow_downward

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

Добавьте еще один элемент в свой cdkDrag, например:

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

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

person Zammy    schedule 29.01.2019
comment
Когда я это делаю, перетаскиваемый элемент сначала летит в крайний левый угол, а затем падает на место. @Zammy - person Madhumita Chowdhury; 10.01.2020

arrow_upward
0
arrow_downward

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

<div *cdkDragPlaceholder style="height: 0px"></div>
person user3311613    schedule 24.06.2021