2

I need to display both swiper (https://www.npmjs.com/package/swiper) and cdkDrag (https://material.angular.io/cdk/drag-drop/overview) functions for a group of elements.

The problem is that when I use the swiper, cdkDrag stops working. Maybe I am doing something wrong, or the swiper does not support cdkDrag.

Here is my code html :

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>

Here is my code typescript :

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');
        },
    },
};

Please let me know if anyone has encountered a similar problem and was able to configure cdkDrag support (https://material.angular.io/cdk/drag-drop/overview) for swiper (https://www.npmjs.com/package/swiper) in Angular 2+

Andrei
  • 341
  • 7
  • 23

0 Answers0