Угловой разрешить cdkDropListEnter без html перетаскиваемого элемента

#angular #angular-cdk

Вопрос:

Я хочу перетащить элемент из «Списка А» в «Группу списков», но я не хочу, чтобы html перетаскиваемого элемента вводил «Группу списков», эффективно делая «Группу списков» только зоной перетаскивания.

Вот HTML-структура того, чего я пытаюсь достичь

 <div cdkDropListGroup>
    <!-- Items to be dragged  -->
    <div class="ListA" cdkDropList cdkDropListSortingDisabled>
        <div class="item1" cdkDrag [cdkDragData]="1"></div>
        <div class="item2" cdkDrag [cdkDragData]="2"></div>
    </div>

    <!-- Allow dropping items without their HTML -->
    <div cdkDropList cdkDropListSortingDisabled (cdkDropListDropped)="onItemDropped($event)"
        [cdkDropListData]="1">
    </div>
    <div cdkDropList cdkDropListSortingDisabled (cdkDropListDropped)="onItemDropped($event)"
        [cdkDropListData]="2">
    </div>
</div>
 

Проблема, которую я пытаюсь решить, заключается в том, что HTML-код перетаскиваемого элемента не помещается в зону перетаскивания и портит дизайн.