Angular : Draggable items inside draggable elements of a cdkDropList

Question

I want to be able to drag elements inside elements that are part of a dragDropList.

Here is the behaviour I want to achieve : https://stackblitz.com/edit/drag-cdk-version-7-vs-11?file=package.json

It works fine with @angular/cdk version 7, but with versions 11 or 14 the behaviour is broken: the elements of the dragDropList can be dragged correctly, but the other draggable element inside them can't be dragged anymore.

My template is as follows:

<div class="example-container">
  <h2>Draggable items inside elements of a cdkDropList</h2>
  <div
    cdkDropList
    [cdkDropListData]="items"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
  >
    <div class="example-box" *ngFor="let item of items" cdkDrag>
      <div class="example-drag" cdkDrag cdkDragBoundary=".example-box">
        {{ item }}
      </div>
    </div>
  </div>
</div>

with my drop event:

drop(event: CdkDragDrop<string[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      console.log('Transfering item to new container');
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

To see the bugged version I just changed the package.json and replaced "@angular/cdk": "^7.0.0", with "@angular/cdk": "^11.0.0", https://stackblitz.com/edit/drag-cdk-version-7-vs-11-xpehkj?file=package.json

Is there a way with @angular/cdk 11 or 14 to achieve the same behaviour as version 7 ?

score 0 · Answer 1 · answered Jul 18 '23 at 17:36

May be little late But I think I figured out what is the issue.

The issue was, for your inside draggables there is no droplist container. You have to add a droplist container by adding cdkDropList directive in parent

Like

<div class="example-container">
  <h2>Draggable items inside elements of a cdkDropList</h2>
  <div
    cdkDropList
    [cdkDropListData]="items"
    class="example-list"
    (cdkDropListDropped)="drop($event)"
  >
    <div class="example-box" *ngFor="let item of items" cdkDropList cdkDrag> // note the 'cdkDropList' directive here
      <div class="example-drag" cdkDrag cdkDragBoundary=".example-box">
        {{ item }}
      </div>
    </div>
  </div>
</div>

Working Example: https://stackblitz.com/edit/drag-cdk-version-7-vs-11-b5sgyq?file=src%2Fapp%2Fapp.component.html

Angular : Draggable items inside draggable elements of a cdkDropList

1 Answers1