0

I have a planner style of application, which has 2 columns. Both have multiple expansion panels and I can drag and drop from the left one to the right one. The catch is I want drag and drop to work on items inside expansion panel as well as whole expansion panel as well. I've written a simplified application, which does pretty much the same, I can drag from the list of Classes and drop in Groups, as well as I can drag an entire Class (expansion panel). It looks since I have cdkDropList directive both in div that contains expansion panel (parent div) and also inside divs in the expansion panel (child div), it works only for topmost div. I can drag both items inside expansion panel and panel itself, but for some reason destination panel will accept drops only from top most element. So if I remove cdkDropList from expansion panel div, then it will start accepting elements inside the panel for dropping.

The application can be found here: https://stackblitz.com/edit/angular-drop-lists-in-accordion-awgvtj?file=src/app/app.component.html

To reproduce the problem start dragging any element from Class 1 to any Group, it will not be accepted to drop. Start dragging entire Class 1 and it will be dropped into Group. Now remove cdkDropList directive and cdkDropListData bind at line 36

    <div
      style="display:block; width: 770px"
      *ngFor="let class of classes; index as i"
      cdkDropList
      [cdkDropListData]="classNames"
    >

and all of the sudden elements from Class 1 panel will be accepted into the Groups.

user1617735
  • 451
  • 5
  • 16
  • check out: https://stackoverflow.com/questions/53239092/angular-7-drag-and-drop-dynamically-create-drop-zones and specifically this: https://stackoverflow.com/questions/60281523/angular-cdk-drag-drop-nested-droplist Paul added a working example which sounds like what you need? – James D Apr 18 '22 at 10:27
  • @JamesD Thanks a lot, that answer was extremely useful, in my application I have a dynamic list of groups I can drag into and user can add and delete them, so I maintain an array of cdkDropList via a service, which keeps an up to date list of groups, and component from which I drag has that list in cdkDropListConnectedTo property. Works like magic! – user1617735 Apr 18 '22 at 22:31
  • Great, so no further help required? – James D Apr 19 '22 at 05:37
  • @JamesD Yes, I suppose this question can be closed as duplicate of https://stackoverflow.com/questions/60281523/angular-cdk-drag-drop-nested-droplist – user1617735 Apr 19 '22 at 08:34

0 Answers0