angular-cdk-nested-drag-drop-demo with external drag-Elements

0
votes

I combined this drag & drop demo with some external draggable elements. As you can see in the Stackblitz example, those external draggable elements are not able to be dropped into the major dropzone or even as a child inside. I´m new in Angular and tried several steps that ended in no result. First I think my draggable-elements need to be registered in the Array "allDropListsIds"...

Edit: The "onDragDrop"-function is not even fired, therefor I think the dropped-Element is not registered, because a placement as child hovers no green Dropcolor. You can try dragging around some existing elements.

It may be also an issue of the template as [connectedDropListsIds], [cdkDropListConnectedTo] may be used wrong.

It would be nice if anybody could give me some hints.

Regards, Dom

1
angulardrag-and-dropangular-cdk

1 Answers

0
votes

In the angular website: angula official docs there is an example of how to make the feature you want, by using the angular/cdk component.

You will need to import in yout TS file:

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

And then use the event 'drop' triggered by your component to your own method and do something like this:

drop(event: CdkDragDrop<string[]>) {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
}