Integrating horizontal scroll and drag and drop CDK

Ionic Framework Ionic Angular
1

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);
}
2

I had a similar problem and could solve it by adding “cdkScrollable” to the scrollable container, in your case the ion-row. Import is coming from ScrollingModule.

3

Hello. I have the same problem. Anyone can figure out? Thanks

4

Hello @leocharrua , did you try build the functionality outside ion-grid, ion-row and ion-col?

5

Hi, yes … but I need a responsive screen, like this:

Xs: 6 cols (two items in a row)
Sm: 3 cols (four items in a row)
Xl: 2 cols (six items in a row)

How I can do that without ion-grid?

Thanks

6

Hi @leocharrua, I recommend you try a traditional alternative, with CSS. In the end it won’t make much difference.

This is a great place to start: Learn CSS Grid - Jonathan Suh