Angular 7 - Drag drop with parent droppable container

Question

I'm trying to use the new Angular 7 CDK Drag and drop to move a list of elements in my site that are added dynamically.

Using this example, taken from angular docs examples and modified for my needs, there you can see that I have a list of elements with a droppable container.

The problem is that when the draggable elements are generated from another component, they do not take the parent droppable as the referenced droppable container to be used. Instead the droppable container property in the CDK Draggable object is null.

I've tried setting the cdkDragRootElement property from CdkDrag directive to check if somehow I could reference the parent element, but instead it makes the elements move whole parent element. This is not the expected behaviour.

Maybe am I missing a CDK Draggable property or in CDK Droppable container to reference the parent droppable list in my list elements?

Here is the "relevant" code in the example:

cdk-drag-drop-sorting-example.html

<div cdkDropList class="example-list">
  <app-test></app-test>
</div>

test/test.component.ts

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
  ];

  constructor() { }

  ngOnInit() {
  }

  drop(event: CdkDragDrop<string[]>) {
    console.log(event);
    /*moveItemInArray(this.movies, event.previousIndex, event.currentIndex);*/
  }

}

test/test.component.html

<div class="example-box" *ngFor="let movie of movies" cdkDrag (cdkDragDropped)="drop($event)">
  {{movie}}
</div>

EDIT

Expected result:

cdk-drag-drop-sorting-example.html

<div cdkDropList class="example-list">
  <app-test></app-test>
</div>

test/test.component.html

<div class="example-box" *ngFor="..." cdkDrag cdkDropList=".example-list">
  {{movie}}
</div>

Go through parents to find the selector and check if it has a cdkDropList directive/instance and attach it to the cdkDrag.

Никита Середа Никита Середа · Accepted Answer · 2018-10-30T09:01:16

0

votes

property cdkDropList must be on app-test - this is DOM element with list of your items

Angular 7 - Drag drop with parent droppable container

EDIT

2 Answers