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+
