html - Funktionieren swiper (https://www.npmjs.com/package/swiper) und cdkDrag (https://material.angular.io/cdk/drag-drop/overview) zusammen in Angular 2+?

Ich muss sowohl die swiper- (https://www.npmjs.com/package/swiper) als auch die cdkDrag- (https://material.angular.io/cdk/drag-drop/overview) Funktionen für eine Gruppe von Elementen anzeigen.

Das Problem ist, dass cdkDrag aufhört zu funktionieren, wenn ich den Swiper benutze. Vielleicht mache ich etwas falsch, oder der Swiper unterstützt cdkDrag nicht.

Hier ist mein HTML-Code:

landing.component.html
    <!-- Swiper -->
    <div [hidden]="appListService?.normalAppList?.length <= 0" class="bg-white landing-apps-footer">
        <div class="landing-apps-container">
            <swiper [config]="config" (click)="onPaginationClick($event)" #usefulSwiper>
                <div id="landing-apps-detail-list" class="fh swiper-wrapper  app-list" cdkDropList draggable="true"
                    (cdkDropListDropped)="drop($event)" [cdkDropListData]="appListService.normalAppList"
                    [cdkDropListConnectedTo]="firstList" #secondList="cdkDropList" cdkDropListOrientation="horizontal">

                    <div class="swiper-slide  pop" *ngFor="let dataItem of appListService.normalAppList" cdkDrag (cdkDragStarted)="onDragStarted()">
                        <a class="apps {{dataItem.icon}}" (click)="gotoAppPage(dataItem)" draggable="false"
                            style="cursor: pointer;">
                            <span class="icon"></span>
                            <span class="title"
                                id="landing-detailApp{{ dataItem.appCode }}">{{ dataItem.appName }}</span>
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-next" id="landing-btnNext"></div>
                <div class="swiper-button-prev"></div>
            </swiper>
        </div>
    </div>

Hier ist mein TypeScript-Code:

config: SwiperOptions = {
    pagination: { el: '.swiper-pagination', clickable: true },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30,
    loop: false,
    loopFillGroupWithBlank: false, //hide/show virtual items
    initialSlide: 0, // Slide Index Starting from 0
    slidesPerView: 6, // Slides Visible in Single View Default is 1
    slidesPerGroup: 6,
    on: {
        init: function () {
            console.log('swiper initialized');
        },
        slideChange: function () {
            console.log('swiper slideChange');
        },
        touchMove: function () {
            console.log('swiper Move');
        },
        tap: function () {
            console.log('tap');
        },
        touchStart: function () {
            console.log('touchStart');
        },
    },
};

Bitte lassen Sie mich wissen, ob jemand ein ähnliches Problem hatte und in der Lage war, cdkDrag-Unterstützung (https://material.angular.io/cdk/drag-drop/overview) für swiper (https://www.npmjs.com/package/swiper) in Angular 2+ zu konfigurieren.