I have a component consisting of 2 drop lists, implemented by accordion component, which implement drag and drop functionality. Problem is, the elements inside the expansion panel are divs with complex DOM structure inside. The goal is to drag and drop the div between two expansion panels. I've simplified the application down to the simplest case where I have only text inside the div to reproduce the issue and it still won't work. The div can't be dragged outside of the parent component, in this case expansion panel. In the simplified example the goal is to drop students into the groups.
Example here: https://stackblitz.com/edit/angular-drop-lists-in-accordion-awgvtj?file=src/app/app.component.html