Angular 7 Drag&Drop nested lists with native CDK

Question

I am using native Angular 7 Drag&Drop provided by @angular/cdk/drag-drop.

Basically, I just need to create one sortable list inside another one as in the code below:

<div class="external-list" cdkDropList (cdkDropListDropped)="drop1($event)">
  <div class="external-item" cdkDrag *ngFor="let item of items">
    {{item.header}}
    <div class="internal-list" cdkDropList (cdkDropListDropped)="drop2($event)">
      <div class="internal-item" cdkDrag *ngFor="let row of item.rows">
        {{row}}
      </div>
    </div>
  </div>
</div>

This is a very schematic example just to demonstrate the purpose.

The problem is when I try dragging the inner items outer ones are dragged instead.

How can I solve this without resorting to 3rd-party packages?

user3910610 · Accepted Answer · 2018-11-08 20:25:13Z

1

I think you will need to use a drag handle (cdkDragHandle on an element inside cdkDrag), at least for the parent list.

https://material.angular.io/cdk/drag-drop/overview#customizing-the-drag-area-using-a-handle

answered Nov 8, 2018 at 20:25

user3910610

111 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Andrii Romanchak Over a year ago

Thanks for the answer. I believe it's possible to achieve the desired behavior but this will probably require some dirty workaround with layout rework (moving child draggable elements out of parent draggable one and using position: absolute to place them to the right places).

Collectives™ on Stack Overflow

Angular 7 Drag&Drop nested lists with native CDK

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related