Create a draggable panel using ng2-dnd

Question

I'm trying to make a nested panel draggable (maybe an image will clarify a bit). So what I am trying to achieve is to make the inner panel draggable by dragging the panel-heading. (I'm using bootstrap v4 so panels are cards)

So far I have tried to make the card-header draggable, which obviously only makes the card-header move. Then I thought of putting the header and sortable-container inside a card and making this draggable, but this resulted in the card only appearing draggable when dragging the li's. Nothing happens when I try to drag the header. I've pasted the code for the inner card below.

<div class="card"  dnd-draggable [dragEnabled]="true">
   <div class="card-header innerCard-header text-center" dnd-draggable [dragEnabled]="true">panel-header</div>
      <ul class="list-group" dnd-sortable-container [sortableData]="listOne">
         <li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">
           {{item}}
         </li>
      </ul>
   </div>
</div>

I guess what I'm trying to achieve is when dragging the card-header it should make the parent div (card) draggable. I'm aware that this possibly could be done with some DOM-manipulation, but that would be against Angulars design principles. What would be the proper way to do this?