Hi all,
I’m trying to implement a Kanban board within my ionic mobile app where I would like to have one swimlane fully visible and one partially visible (like Trello or Asana app) and users are able to drag and drop cards into the swimming lanes.
I am able to create the board and make the drag and drop working but as soon as I try to drag and drop a card to a card that is not visible but needs to be scrolled to the UI freezes. Did anyone had succes implementing such feature?
Any helpful links or tips are greatly appreciated.
Kind regards,
// Esteday
// Component.html
<ion-content [fullscreen]="true" class="ion-padding" >
<ion-grid cdkDropListGroup>
<ion-row class="scroll">
<ion-col size="8" cdkDropList [cdkDropListData]="todo" class="example-list" (cdkDropListDropped)="drop($event)">
<h2>To do</h2>
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</ion-col>
<ion-col size="8" >
<h2>EMPTY</h2>
</ion-col>
<ion-col size="8" cdkDropList [cdkDropListData]="done" class="example-list" (cdkDropListDropped)="drop($event)">
<h2>Done</h2>
<div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
</ion-col>
</ion-row>
</ion-grid>
// Component.ts
import {CdkDragDrop, moveItemInArray, transferArrayItem} from "@angular/cdk/drag-drop";
todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
done = ['Get up', 'Brush teeth', 'Take a shower', 'Check e-mail', 'Walk dog'];
drop(event: CdkDragDrop<string[]>) {
console.log(event)
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex,
);
}
}
//component.css
.scroll{
flex-wrap: nowrap;
overflow-x: scroll!important;
overflow-y: hidden;
}
.example-container {
width: 400px;
max-width: 100%;
margin: 0 25px 25px 0;
display: inline-block;
vertical-align: top;
}
.example-list {
border: solid 1px #ccc;
min-height: 60px;
background: white;
border-radius: 4px;
overflow: hidden;
display: block;
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: move;
background: white;
font-size: 14px;
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}